React js 中的 CORS 问题

Posted 2023-03-31

【中文标题】React js 中的 CORS 问题

【英文标题】：CORS issue in React js

【发布时间】：2019-12-03 18:23:49

【问题描述】：

我在前端使用 React js，在服务端使用 webApi (c#)。最初我在尝试从 db 获取数据时遇到了 CORS 问题，然后我在 web.config 文件中添加了以下行，然后问题得到解决。我能够从 web api 获取数据。

<customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type,Origin,Accept" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>

但是现在我正在尝试发布数据，即将数据从 react js 发送到 web api，它会引发相同的 cors 错误。请从 react js 中找到以下几行

fetch(url, 
    method: 'POST',
    mode:'cors',
    // body: JSON.stringify(data),
    // headers :
    //   'Content-Type': 'application/json',
    //   'Access-Control-Allow-Origin':'*'
    // ,
    headers: 
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin':'*',
      'Access-Control-Allow-Headers':'Origin,Content-Type,Accept',

    
  );

我有什么遗漏的吗？我不明白为什么它适用于获取数据而不是发布数据。任何人都可以帮助我吗？ 提前致谢。

【问题讨论】：

请尝试使用 Axios 库而不是 fetch。例如 axios.get('some url')

你的 CORS 错误是什么？

@TopW3 感谢您的解决方案。我会试试看，但我的问题是为什么它适用于从 api 获取数据而不是发布数据。？

我猜是后端的问题。请参考本页：expressjs.com/en/resources/middleware/cors.html

@Arkerone Failed to load resource: the server responded with a status of 405 (Method Not Allowed) Access to fetch at 'the url' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. asyncToGenerator.js:6 Uncaught (in promise) TypeError: Failed to fetch

【参考方案1】：

我已经安装了Microsoft.AspNet.WebApi.Cors dll，cors 问题得到了解决。谢谢大家。

【参考方案2】：

当我从 medium.com 获取数据时，我遇到了微笑问题。在那里，RSS 提要发生了 CROS 问题。如果您从后端获取 RES 提要数据，则使用 RSStoJSON api。获取https://rss2json.com/#rss_url=http%3A%2F%2Ffeeds.twit.tv%2Fbrickhouse.xml

在你的项目中使用这个依赖https://www.npmjs.com/package/jsonfeed-to-rss

但我遵循了那些机制

我不能完全说这个问题和你的问题一样。如果你提到了这个错误，我很容易回答

【讨论】：

错误信息：Failed to load resource: the server responded with a status of 405 (Method Not Allowed) Access to fetch at 'the url' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. asyncToGenerator.js:6 Uncaught (in promise) TypeError: Failed to fetch