我已经安装了一个带有CORS烧瓶的服务器,并使其能够将数据发送到我构建的React Web应用程序,但是当我去测试POST方法时,它停止工作,现在它已经无法发送和接收。 Web应用程序控制台中的错误日志为:“ Access-Control-Allow-Origin不允许使用起源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)
}
答案 0 :(得分:2)
您需要在API上启用CORS策略,以便它可以接受来自不同主机的请求。
只需创建一个Google Flask cors,并确保您接受的是“ *”,或者特别是您的URL。
尽管您接受了cors,但您应该能够接受所有CORS,然后使您的API足够健壮,以致无法请求令人讨厌的数据
.tomer_tm_hero_header_wrap .image_wrap{
width: 200px;
height: 200px;
display: inline-block;
margin-bottom: 38px;
position: relative;
}
.tomer_tm_hero_header_wrap .image_wrap .main{
position: absolute;
top: 8px;
bottom: -8px;
left: 8px;
right: -8px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 100%;
}
.tomer_tm_hero_header_wrap .image_wrap img{
min-width: 100%;
border-radius: 100%;
border: 8px solid rgb(227, 135, 45);
}
我阅读了文档,可以将@cross_origin()添加为简单的装饰器:https://flask-cors.readthedocs.io/en/latest/#route-specific-cors-via-decorator