如何修复："<localhost>Access-Control-Allow-Origin不允许原点"-flask_cors

Question

我已经用烧瓶 CORS 设置了一个服务器，并让它将数据发送到我构建的 React Web 应用程序，但是当我去测试 POST 方法时，它停止了工作，现在它被破坏了发送和接收。Web 应用控制台中的错误日志为："访问控制允许原产地不允许原 http://localhost:3000。由于访问控制检查，提取 API 无法加载 http://127.0.0.1:5000/。">

我之前遇到了这个问题并添加了flask_cors它工作了一段时间。这是我的服务器代码：

from flask_cors import CORS, cross_origin
app = FlaskAPI(__name__)
app.config['SECRET_KEY'] = 'the quick brown fox jumps over the lazy dog'
app.config['CORS_HEADERS'] = 'Content-Type'
cors = CORS(app, resources={r"/": {"origins": "http://localhost:port"}})
# Also fails with this variation
# cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
@app.route("/", methods=['GET', 'POST'])
@cross_origin(origin='localhost',headers=['Content- Type','Authorization'])
# Also fails with these variations
# @cross_origin(origin='http://127.0.0.1:5000/',headers=['Content- Type','Authorization'])
# @cross_origin(origin='http://localhost:3000',headers=['Content- Type','Authorization'])  
def job_api():
with app.app_context():
job_data = get_job_data()
json_data = jsonify(eqtls=[job.data for job in job_data])
return json_data
if __name__ == "__main__":
app.run(debug=True)

这是我的客户端代码：

componentDidMount() {
fetch('http://127.0.0.1:5000/')
.then(res => res.json())
.then((data) => {
this.setState({ job_data: data.eqtls })
})
.catch(console.log)
}

Answer 1

您需要在 API 上启用 CORS 策略，以便它可以接受来自不同主机的请求。

只需做一个谷歌烧瓶，并确保你接受"*"或特别是你的URL。

如果你接受cors，你应该能够接受所有的CORS，然后使你的API足够健壮，这样就不会请求任何讨厌的数据

。

尝试：

from flask_cors import CORS, cross_origin
app = FlaskAPI(__name__)
app.config['SECRET_KEY'] = 'the quick brown fox jumps over the lazy dog'
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route("/", methods=['GET', 'POST'])
@cross_origin()
def job_api():
with app.app_context():
job_data = get_job_data()
json_data = jsonify(eqtls=[job.data for job in job_data])
return json_data
if __name__ == "__main__":
app.run(debug=True)

我阅读了文档，可以添加 @cross_origin(( 作为简单的装饰器：https://flask-cors.readthedocs.io/en/latest/#route-specific-cors-via-decorator