使用 POST 请求的 fetch 反应 CORS 问题答案

【问题标题】：React CORS issue with fetch for POST request使用 POST 请求的 fetch 反应 CORS 问题
【发布时间】：2020-06-07 20:56:18
【问题描述】：

我有一个在http://localhost:10080/v1 上运行的 api [我无法更改 api 的代码]。我已经构建了一个反应应用程序来向该 API 发送一些发布数据。 React 应用在 http://localhost:3000 上运行

handleSubmit(event){
    event.preventDefault()
    const base_url="http://localhost:10080/v1/"
    const data={<<some json data>>}
    let headers = new Headers();
    headers.append('Content-Type', 'application/json')
    fetch(base_url,{
        method:'POST',
        mode: 'no-cors',
        header:headers,
        body: JSON.stringify(data),

    })

}

当我将 mode 更改为 cors 时，我的跨域请求被阻止。当我将mode 更改为no-cors 时，我收到415-Unsupported Media Type 错误，因为当我们禁用cors 时，我们无法更改请求标头（在其他答案和文档中给出）。如何克服这个问题并向该 api 发送 post 请求？

【问题讨论】：

如果你在 localhost 上运行它为什么不能改变 api 的代码？无论如何，您是否尝试过使用 cors-anywhere cors-anywhere.herokuapp.com
api 是我下载的应用程序的一部分，因此无法更改。是的，我已经尝试过它在我的情况下不起作用。
用邮递员尝试api是否有效？
@SuleymanSah 当我通过 Firefox 访问 api 并且我能够使用浏览器的工具发送发布请求时，它可以工作。所以，它也必须与邮递员一起工作。

标签： javascript reactjs cors fetch cross-origin-read-blocking

【解决方案1】：

使用 CMD 在您的 Node 应用程序中运行“npm install cors”，然后在您的节点应用程序的 index.js 文件中添加以下代码。

const cors = require('cors');

app.use(cors());

【讨论】：

【解决方案2】：

试试下面的代码来动态绑定 RadTreeView 和 ContextMenu 的编辑、删除和添加功能。

JS：

<script type="text/javascript">
    function OnClientContextMenuItemClicking(sender, args)
     {
        var menuItem = args.get_menuItem();
        var treeNode = args.get_node();
        menuItem.get_menu().hide();
        switch (menuItem.get_value())
         {
            case "edit":
                treeNode.startEdit();
                break;
         }
     }
</script>

希望这会有所帮助，

【讨论】：

【解决方案3】：

我只能猜测，但在我看来，如果不更改本地 API，问题就无法解决。

您的本地 api 在 localhost:10080 上运行并且不允许 CORS，因此它将阻止所有不是来自 localhost:10080 的内容。

从那里，两个选项是您的本地 API 允许某些选项并允许 CORS，或者有一种方法可以从您的 API 为您的前端提供服务（因此具有相同的来源）。

查看有关 CORS 服务器端的资源：@987654321@

【讨论】：

您好，我无权更改 api，因为它与我下载的应用程序捆绑在一起，无法更改。

【解决方案4】：

您可以尝试在您的 package.json 中添加代理：

   "proxy": "http://localhost:10080"

有关我的研究以尝试回答您的问题的更多信息，您可以找到this website

【讨论】：

嗨，我试过了，但在我的情况下不起作用。谢谢。
这是我一直在寻找的答案。我对 Angular 也有类似的问题，也用代理解决了这个问题。易于实施且工作完美。
@kotlasaicharanreddy 你重启你的 React 应用了吗？它使用 fetch 对我有用，请注意您需要使用相对路径。

【解决方案5】：

我假设“http://localhost:10080/v1/”是您的后端 API，如果它是一个快速应用程序，请确保您安装了 cors。

【讨论】：

嗨，是的，它的后端，但不确定它是在哪个平台上构建的，因为它只是我下载的一个应用程序。所以不知道后端，也不能改变后端的任何东西。

【解决方案6】：

var cors = require('cors');
var request = require('request-promise');
var express = require('express');
var app = express();
var server = app.listen('YOUR PORT', function(){console.log('Listening port 3000')});
app.use(cors());
app.get('/exchangeInfo', function (req,res) {
    request({
        method: 'GET',
        url: 'YOUR API',
        resolveWithFullResponse: true,
    }).then(r => {
        res.send(JSON.parse(r.body));
    }).catch()
});

您可以在本地使用上述代码来运行本地服务器并克服cors，或者您可以使用chrome插件https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=en-GB

【讨论】：

我发送的是 POST 请求而不是 GET 请求。
只需将请求更改为 POST 并在 api @kotlasaicharanreddy 中发送参数。参考：youtube.com/watch?v=R98rmaRkgy8