React 应用 POST 与 CORS 和获取有关的问题

Question

我有一个与 SQL 数据库通信的基本 React 应用程序，并且有一个演示 API 运行 Flask。我知道我的 API 可以在 Postman 上进行手动确认。

我只是想通过我已验证的 API 将数据 post 写入我的数据库。但是，我运行遇到了基于 post 方法中的 headers 的获取问题。以下是我当前的代码：

 const request = new Request("http://155.98.25.80:8000/user", 
        {method: 'POST', 
        headers:{'Content-Type': 'application/json', 'Access-Control-Allow-Origin': "http://localhost:3000/", 
        'Accept':'application/json'}, 
        body: user_data, 
        mode:'cors',
       });
        console.log(request)
        fetch(request)
            .then(response => {
                if (response.status === 200) {
                    return response.json();
                } 
                else {
                    throw new Error('Something went wrong on api server!');
                }
            })
            .then(response => {
                console.debug(response);
                // ...
            }).catch(error => {
                console.error(error);
            });
    }

这是一个非常标准的 POST 请求，在单击按钮时触发。当我发出这个请求时，我可以看到 API return 是一个 200 代码，这意味着它已通过数据库。但是，在我的浏览器 (Chrome) 控制台中，我收到以下错误：TypeError: Failed to fetch.

我在这里迷路了。我知道我的 post 请求正在处理，但似乎 return 没有响应。我已经阅读了许多其他 post 处理此问题的文章，但我不确定我的应用程序出了什么问题。任何帮助都会很棒。

Answer 1

我运行几年前就遇到过这个令人沮丧的问题，我可以为您解答。你痛苦的根源大概就是preflight check.

为什么会这样

当您使用邮递员发出 POST 请求时，它会直接命中 POST 端点(POST http://155.98.25.80:8000/user)

但是当您通过 Chrome 发出 POST 请求时，它首先会通过 preflight check。这意味着它首先对同一端点 (OPTIONS http://155.98.25.80:8000/user) 进行 OPTIONS 调用。 OPTIONS 调用必须 return 该端点上允许的内容（为了 CORS 安全）。 OPTIONS 调用必须 return headers 让 Chrome 它接受什么样的请求以及来自谁。

对你来说，你的 OPTIONS http://155.98.25.80:8000/user 应该 return

Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: *

注意：Access-Control-Allow-Origin应该是你的具体api URL（也许155.98.25.80），*允许一切

由于 Access-Control-Allow-Methods 允许 POST，现在 Chrome 尝试时将允许 POST 调用。

如何发现它

如果您打开 Chrome Dev Tools 并转到“网络”选项卡，您将看到它在进行 POST 调用之前如何进行 OPTIONS 调用

OPTIONS调用returnAccess-Controlheaders

然后，可以进行POST调用

备注

Chrome 会自行进行预检，您无需添加任何额外的 React 代码即可实现。

TL;DR

在 Flask API 中创建一个新端点 (OPTIONS http://155.98.25.80:8000/user) returns

Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: *

React 应用 POST 与 CORS 和获取有关的问题

React app POST issues with CORS and fetch

post

request

cross-domain

fetch

reactjs

为什么会这样

如何发现它

备注

TL;DR