来自 React 的 Flask API 调用的 CORS 问题都在 localhost
Posted
技术标签:
【中文标题】来自 React 的 Flask API 调用的 CORS 问题都在 localhost【英文标题】:CORS issues for Flask API call from React both in localhost 【发布时间】:2020-06-18 01:26:37 【问题描述】:我正在从 React 调用 Flask API(都在 localhost 上运行)并且遇到了 CORS 问题。 发出请求时,浏览器(Chrome)给出以下错误
Access to XMLHttpRequest at 'http://localhost:5000/sas' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
设置
Flask 设置如下
from flask_cors import CORS
from flask import Flask, request, Response
from flask_restful import Api, Resource
import json
class SAS(Resource):
def get(self):
content = request.json
js = json.dumps(
"Response": "Some response"
)
resp = Response(js, status=200, mimetype='application/json')
return resp
app = Flask(__name__)
cors = CORS(app)
api = Api(app)
api.add_resource(SAS, '/sas/')
React中使用axios的调用如下
buttonPressed = async event =>
event.preventDefault();
const response = await axios.get(`http://localhost:5000/sas`,
data:
user: "user",
file_name: "user",
directory_name: "user"
);
;
注意:从 Postman 运行请求可以正常工作并显示标头 Access-Control-Allow-Origin = *
知道如何解决这个问题吗?
另外,如果我将 React 前端和 API 作为 dockerized 应用程序运行,我应该不会再看到这个问题了,对吗?在这种情况下,我也会考虑在开发过程中绕过问题
【问题讨论】:
这有关系吗? github.com/corydolphin/flask-cors/issues/200 感谢@Pitto 指出这一点。我之前遇到过该页面,但不幸的是它无助于解决问题 【参考方案1】:请尝试使用 cross_origin 装饰器,就像在这个最小示例中一样:
from flask import Flask, request, jsonify
from flask_cors import CORS, cross_origin
app = Flask(__name__)
CORS(app, support_credentials=True)
@app.route('/sas', methods=['POST', 'GET', 'OPTIONS'])
@cross_origin(supports_credentials=True)
def index():
if(request.method=='POST'):
some_json = request.get_json()
return jsonify("key": some_json)
else:
return jsonify("GET": "Nice Get Request")
if __name__=="__main__":
app.run(host='0.0.0.0', port=5000)
如果可行,那么我们将在您的代码中实现相同的装饰器。
【讨论】:
感谢@Pitto,但仍然无法正常工作。错误现在略有不同Access to XMLHttpRequest at 'http://localhost:5000/sas/' (redirected from 'http://localhost:5000/sas') from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
我终于能够使用您的建议从 React 发送请求,但也修改了 React 请求以发送到 http://127.0.0.1:5000/sas
而不是 http://localhost:5000/sas
(为什么它应该有所不同?)。但是仍然无法使用flask_restful
嗨@GZZ。如果对您有用,请考虑支持我的答案和/或选择它作为最终答案。谢谢!以上是关于来自 React 的 Flask API 调用的 CORS 问题都在 localhost的主要内容,如果未能解决你的问题,请参考以下文章
React 和 Flux:“在调度中间调度”以显示来自 API 调用的错误消息
CORS 阻止来自 Dockerized React 项目的 API 调用
如何在django api调用的react js中使用来自post请求的响应部分的数据?
没有收到来自 Flask 后端的 React-Native 前端
如何使用 React Hooks 和 Context API 正确地将来自 useEffect 内部调用的多个端点的数据添加到状态对象?