fetch 总是通过 OPTIONS 方法答案

【问题标题】：fetch always pass with OPTIONS methodfetch 总是通过 OPTIONS 方法
【发布时间】：2019-01-26 04:20:56
【问题描述】：

我用 flask-restplus 制作了 API 服务器。

同时使用 cors 模块来避免 CSP 问题。

前端是 React.js。

我的代码在这里。

class ArticleList(Resource):
    def post(self):
        print(1)
        return {"status":"true", "result":"article write success"}, 200

React.js 代码在这里。

_writeArticle = () => {
    const { title, body, tags, password } = this.state;
    const data = {title: title, body: body, tags: tags, password: password};
    fetch("http://127.0.0.1:5000/article/", {
        method: "POST",
        mode: "cors",
        headers: {
            "Content-Type": "application/json"
        },
        body: data
    })
    .then(res => {
        if(res.status === 200) {
            return <Redirect to='/' />
        } else {
            alert("error");
        }
    })
    .catch(err => console.log(err))
}

我将方法定义为POST。但是，它使用OPTIONS 方法请求。

在谷歌搜索后，该问题是由 CORS 引起的。

所以我将 cors 定义为这样的主代码。

from flask import Flask
from flask_restplus import Api, Resource
from api.board import ArticleList, Article
from flask_restplus import cors

app = Flask(__name__)
api = Api(app)
api.decorators=[cors.crossdomain(origin='*')]

api.add_resource(ArticleList, '/article')
api.add_resource(Article, '/article/<int:article_no>')

if __name__ == '__main__':
    app.run(debug=True)

但它仍然请求OPTIONS。

我该如何解决这个问题？

【问题讨论】：

这是发出此选项请求的浏览器，出于安全考虑。您必须将服务器更改为接受选项请求的状态。
当浏览器发出选项请求时，您需要确保您的服务器返回 200 ok 并在响应标头中适当地设置 Access-Control-Allow-Origin 标头。您无法绕过选项请求，因为它是由浏览器自动发出的

标签： reactjs cors flask-restplus

【解决方案1】：

OPTIONS 请求称为pre-flight request。
在某些与CORS 相关的情况下，网络浏览器会首先向服务器发送pre-flight request，以检查您的域是否允许向服务器发出请求。如果服务器说yes，那么您的实际POST 请求将被发送。否则，将不会发送额外的请求，并且网络浏览器会向您发送错误消息。

这是关于pre-flight request的文档：
https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1#preflight-requests

根据文档：

pre-flight 请求使用 HTTP OPTIONS 方法。

【讨论】：