我正在从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应用程序运行，我应该不会再看到这个问题了，对吗？在这种情况下，我也会考虑绕过这个问题，而我的发展
2条答案
按热度按时间hk8txs481#
请尝试使用cross_origin装饰器，就像这个最小的例子：
如果这样可以工作，那么我们将在代码中实现相同的装饰器。
m2xkgtsf2#
我在应用程序中遇到了同样的CORS问题。尽管尝试了许多解决方案，并详尽地探讨了这里提供的建议，但我无法解决这个问题。
然后，在我尝试重新启动Python服务器的过程中，我注意到它没有启动。在进一步的调查中，我发现一个进程占用了端口5000。使用命令lsof -i：5000，我发现以下输出：
在研究了这个ControlCe过程可能是什么之后，结果发现它与AirPlay接收器有关。在“系统偏好设置”中的“共享”选项卡下禁用AirPlay接收器可释放端口5000。
完成后，我的Python服务器能够在端口5000上正常运行，而不会出现之前的CORS错误。因此，如果您遇到类似的问题，值得检查是否有像AirPlay Receiver或任何其他服务这样的进程可能占用服务器的指定端口。
请记住，CORS问题的原因不仅限于服务器端或客户端代码配置，还可能是由于系统级进程干扰了服务器的操作。