尝试：

Question

我已经安装了一个带有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)
  }

Answer 1

您需要在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

如何解决：“ Access-Control-Allow-Origin不允许源<localhost>。” -带flask_cors

1 个答案:

尝试：