允许使用 Flask 和 React 请求 CORS

Posted 2023-03-04

【中文标题】允许使用 Flask 和 React 请求 CORS

【英文标题】：allowing CORS request with Flask and React

【发布时间】：2018-02-03 18:46:50

【问题描述】：

我正在尝试通过ajax 请求将客户端与服务器连接。

在localhost:8080 上运行的我的客户端有一个按钮，该按钮调用一个函数，该函数向本地运行的服务器localhost:5000 发出简单的ajax 请求。

onClick 函数：

  handleClick() 
console.log("check flights button was clicked!");
console.log(this.state);
const baseUrl = 'localhost:5000'
ajax.get(`$baseUrl/flights/$this.state.origin_$this.state.destination`)
.end((error, response) => 
  if (!error && response) 
    console.log('got a valid response from the server')
   else 
    console.log(`Error fetching data from the server: `, error)
  
);

使用Flask 实现的（非常）简单的服务器如下：

from flask import Flask, request
from flask_restful import Resource, Api
from json import dumps

app = Flask(__name__)
api = Api(app)

class Flights(Resource):
    def get(self, origin, destination):
    answer = 'we got some data ' + origin + ' ' + destination
    print answer

api.add_resource(Flights, '/flights/<string:origin>_<string:destination>')

if __name__ == '__main__':
    app.run()

如果我只需转到localhost:5000/flights/origin_destination，我就可以访问服务器，它会打印一条消息，说明它已收到来源和目的地。 但是，当我尝试执行 ajax 请求时，我收到以下错误：

XMLHttpRequest cannot load localhost:5000/flights/Porto_Lisboa. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

关于如何纠正这种行为的任何建议？ 提前谢谢你。

【参考方案1】：

正如错误提示的那样，您的请求中缺少协议名称。尝试将其添加到字符串的开头：

const baseUrl = 'http://localhost:5000'

而不仅仅是localhost:5000

【讨论】：

你是对的，我实际上是同时通过谷歌搜索发现的，现在我得到这个错误：XMLHttpRequest 无法加载localhost:5000/flights/Porto_Lisboa。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'localhost:8080' 不允许访问。立即谷歌搜索

添加Access-Control-Allow-Origin 标头以便客户端可以请求它是服务器任务。如果你正在使用 Flask，你可以看看 flask-cors.readthedocs.io/en/latest 例如。

是的，这很正常。客户端拒绝读取请求，因为服务器未使用 Access-Control-Allow-Origin 标头进行响应。

感谢您的回答，他们非常有帮助！

嗨@RafaelMarques，如果这个或任何答案已经解决了您的问题，请点击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。