无法从 Heroku 应用获取数据。 CORS 错误

Posted

技术标签:

【中文标题】无法从 Heroku 应用获取数据。 CORS 错误【英文标题】:Failed to fetch data from Heroku app. CORS error 【发布时间】:2018-12-04 09:32:45 【问题描述】:

我一直在努力从 Redux 中的 heroku 应用程序获取数据,并且遇到了几个 CORS 错误:

Failed to load https://app-name.herokuapp.com/users: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

第二个错误

localhost/:1 Uncaught (in promise) TypeError: Failed to fetch

我从 Express 创建了 Heroku 应用,在我的响应代码中我有

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);

我在 Redux 中的 fetch 函数看起来像

const url = "https://app-name.herokuapp.com/users";
return fetch(url, 
 method: 'GET',
 mode: 'cors',
 headers:  'Content-Type': 'text' 
)

【问题讨论】:

【参考方案1】:

在您的 cors 设置中,您有 http://localhost:3000,但您的服务器在 https://app-name.herokuapp.com 上运行。

【讨论】:

以上是关于无法从 Heroku 应用获取数据。 CORS 错误的主要内容,如果未能解决你的问题,请参考以下文章

Angular 应用程序无法从 Cloudflare 背后启用 CORS 的站点获取数据

在 Heroku 上的 Django 应用程序中为 CORS 指定 URL

如何在 Heroku 上使用我的 Angular 应用程序解决 CORS 问题

Heroku Rails CORS 问题

在我的 React 应用程序中获取 api 数据时如何修复 CORS 错误?

在 Heroku 上的 Django 应用中启用 CORS