从自己的域中获取 api 时出现 CORS 错误

Posted

技术标签:

【中文标题】从自己的域中获取 api 时出现 CORS 错误【英文标题】:CORS error when fetching api from its own domain 【发布时间】:2018-06-09 05:11:55 【问题描述】:

一个应用程序用户在尝试从同一域获取 api 时经常出错。这个错误只出现在Chrome,其他浏览器在他的电脑上都可以。他还尝试安装 Chrome CORS 扩展,但没有成功。有人知道为什么会发生这种情况吗?

以下错误文字:

无法加载http://my-app.com/api/v1/scoreboard:对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,Origin 'http://www.my-app.com' 不允许访问。如果不透明的响应满足您的需求,请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

【问题讨论】:

好像 www 和 no-www 请求不是同一个来源 【参考方案1】:

这取决于几件事,但通常调用代码不应该有任何特殊配置。相反,您的服务器端必须决定拒绝或允许请求。如果您的服务器端可以有一个 .htaccess 文件,请尝试添加此行。

<IfModule mod_headers.c>
 Header set Access-Control-Allow-Origin "*"
 Header set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PATCH"
 Header set Access-Control-Allow-Headers "Content-Type,Authorization"
</IfModule> 

不要忘记在允许的方法列表中添加 OPTIONS 方法。那是因为浏览器总是通过发送一个 OPTIONS 请求来检查端点的可用性。

【讨论】:

【参考方案2】:

添加从 www 到 no-www 域名的 301 重定向对我有用。在这里找到解决方案nginx no-www to www and www to no-www

【讨论】:

【参考方案3】:

如果wwwnon www 导致CORS 问题。那么在我看来,您可以将非 WWW URL 重定向到 WWW URL。可以使用 .htaccess 或更改 c-panel 上的某些设置来实现 这里是相关答案Redirect non-www to www in .htaccess

另一种选择是在服务器端设置 cors 标头。

希望对你有帮助

【讨论】:

以上是关于从自己的域中获取 api 时出现 CORS 错误的主要内容,如果未能解决你的问题,请参考以下文章

从 React 前端的 Zoho API 获取数据时出现 CORS 错误

尝试从 Github API + Spring Boot 获取到 Angular 时出现 CORS 错误

本地获取 API 时出现自签名证书错误

尝试处理 CORS 请求时出现 ParseError

通过 Office Scripts Fetch 调用 API 时出现 CORS 问题

从 Angular Js(Java Web)调用 API 时出现 CORS 错误