Ionic - 跨域请求被阻止问题

Posted 2023-03-04

【中文标题】Ionic - 跨域请求被阻止问题

【英文标题】：Ionic - Cross-Origin Request Blocked Issue

【发布时间】：2015-02-08 18:06:20

【问题描述】：

我已经使用 Yeoman 生成器 (https://github.com/diegonetto/generator-ionic) 设置了 Ionic 开发环境。一切正常。

问题出在服务器端请求上，我收到 Cross-Origin Request Blocked 错误。

我在 .htaccess 文件和 AngularJS app.js 中添加了下面的链接，仍然得到同样的错误

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers: Authorization

AngularJS 提供者

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.withCredentials = true;

我得到的错误信息是

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 
http://192.168.1.18/tracker/user/login. 
This can be fixed by moving the resource to the same domain or enabling CORS.

请求和响应标头屏幕

请指导我需要更改任何配置以启用 CORS。我们的服务器端框架是 Zend 1.x

【问题讨论】：

希望，在你的 htaccess 文件中也添加这个 Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT" ...我相信，这个 htaccess 文件位于里面“245webserver”文件夹...试着告诉我

尝试将您的 .htaccess 标头设置为：Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept

【参考方案1】：

跨域是由您的浏览器强制执行的，您当前的设置不应阻止从任何分布式手机运行应用程序。

要允许您的“服务于浏览器”应用程序与您的服务器之间进行通信，请使用浏览器插件

Allow-Control-Allow-Origin: * Chrome Plugin 做这项工作

【讨论】：

现在我收到以下错误“当凭据标志为真时，不能在 'Access-Control-Allow-Origin' 标头中使用通配符 '*'。”

删除“withCredentials”我认为你不需要它@Muthu

插件中是否有可能添加我的本地主机名称而不是'*'

是的，您可以配置插件

@BenDiamant 我在 Symfony 服务器上运行的 Firefox、Ionic 和 Symfony 2 遇到了同样的问题（localhost:8000，如果我无法配置 .htaccess 设置）。我将 Ionic 应用程序代理到 localhost:8080。我仍然收到“跨源请求被阻止”。我真的不明白为什么浏览器会阻止正常的 API 调用。浏览器和 html5 应用程序之间有区别吗？某处有详细解释吗？

【参考方案2】：

我已将 .htaccess 文件更改如下，结果显示，谷歌浏览器不接受“*”，所以我指定了确切的 URL

Header set Access-Control-Allow-Origin "http://localhost:8100"
Header set Access-Control-Allow-Credentials: true

【参考方案3】：

虽然我没有将 Zend 与 Ionic 结合使用的经验，但我在通过 Ionic 与 IIS 托管的 REST API 交互时确实遇到了这个问题。

对我来说，除了您已经拥有的之外，我还必须添加“访问控制允许方法：GET、POST、PUT、DELETE、OPTIONS”服务器端。

添加“允许方法”标头后，我能够充分利用我的 API。

如果这不适合您，请回来报告，我将深入研究我的项目，看看我是否忘记了同样需要的客户端更改。