如何修复："Origin <localhost> is not allowed by Access-Control-Allow-Origin." -- 使用 flask_cors

Question

我已经用 flask CORS 设置了一个服务器，并让它工作以将数据发送到我构建的 React 网络应用程序，但是当我去测试 POST 方法时它停止工作，现在它是发送和接收中断。 Web 应用程序控制台中的错误日志为："Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. Fetch API cannot load http://127.0.0.1:5000/ due to access control checks. "

我运行早些时候解决了这个问题并添加了 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 策略，以便它可以接受来自不同主机的请求。

只需执行 google Flask 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

如何修复："Origin <localhost> is not allowed by Access-Control-Allow-Origin." -- 使用 flask_cors

How to fix: "Origin <localhost> is not allowed by Access-Control-Allow-Origin." -- with flask_cors

flask

cors

flask-cors

尝试：