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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从其自己的域中获取api时出现CORS错误相关的知识,希望对你有一定的参考价值。

当尝试从同一域中获取api时,其中一个app用户经常出错。此错误仅在Chrome中出现,其他浏览器在他的计算机上都可以。他还试图安装Chrome CORS扩展,但没有运气。有没有人知道为什么会这样?

错误文字如下:

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

答案

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

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

希望能帮助到你

另一答案

这取决于几个方面,但通常调用代码不应该有任何特殊配置。相反,您的服务器端必须决定拒绝或允许该请求。如果您的服务器端可以有.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请求来检查端点可用性。

另一答案

添加301重定向从www到no-www域名为我工作。在这里找到解决方案Nginx no-www to www and www to no-www

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

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

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

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

尝试处理 CORS 请求时出现 ParseError

Angular 调用 Eureka API 时出现 CORS 来源错误

使用 Angular 访问 Flickr API 时出现 CORS 错误 [重复]