离子应用程序无法使用 $http 连接启用 cors 的服务器

Posted 2023-03-04

【中文标题】离子应用程序无法使用 $http 连接启用 cors 的服务器

【英文标题】：ionic app cannot connect cors enabled server with $http

【发布时间】：2015-07-19 21:42:01

【问题描述】：

我正在尝试使用 ionic 框架构建移动应用程序。当我的应用程序尝试连接服务器以获取 json（服务器是 web api 并且启用了 cors）时，它只会在 genymotion 和真实设备上返回 404。但是当我在浏览器中使用ionic serve 运行应用程序时，一切正常。

我很确定 CORS 可以正常工作。这是我在应用程序在浏览器中工作时得到的响应标头。

回应

Access-Control-Allow-Origin:*
Cache-Control:no-cache
Content-Length:395
Content-Type:application/json; charset=utf-8
Date:Fri, 08 May 2015 20:24:04 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/7.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET

请求：

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, lzma, sdch
Accept-Language:tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
DNT:1
Host:*******:14400
Origin:http://192.168.0.28:8100
Pragma:no-cache
Referer:http://192.168.0.28:8100/

Config.xml 在配置中有<access origin="*"/> 这一行

在我的 app.js 中，我删除了所有 http 调用的 X-Requested-With 标头。

.config(['$httpProvider', function($httpProvider) 

        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];  
    
])

我在我的工厂类中简单地使用 get 请求到服务器。

$http.get(serverPath + "/api/mobilerest/mainPage");

当我在 Genymode 或真实设备中运行应用程序时，响应为 404 并且 statusText 为“未找到”。我很确定 web api 正在工作，这种行为的原因是在基于离子的应用程序中，我的应用程序是本地文件，协议是 file:/// 所以请求中的 Origin 标头为空，然后服务器返回 404。我也试过了没有任何服务器的本地文件我得到与应用程序相同的错误。

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
DNT:1
Host:server:14400
Origin:null
Pragma:no-cache

我错过了什么吗？

【参考方案1】：

cordova-plugin-whitelist目前似乎是“强制”的。

安装它：

cordova plugin add cordova-plugin-whitelist

配置 config.xml

您可以使用 * 保留当前设置或更改为更严格的规则

添加 html 政策 在 index.html 上，您还应添加策略。 授权一切，这里是：

 <meta http-equiv="Content-Security-Policy" content="default-src *;
 style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'
 'unsafe-eval'"

【讨论】：

谢谢@aorfevre，它成功了。但是为什么我在任何地方都找不到这个信息:)

再次感谢您分享@aorfevre。像广告一样，我无法弄清楚为什么它在浏览器中而不是在我的设备上工作

这对我也有用。我不确定为什么没有将其添加到任何文档中。它已在一些论坛中讨论过。

感谢老兄的帮助 :)

我在 ios 模拟器中遇到了同样的问题。我确实安装了白名单插件并在 index.html 上设置了 html 策略。看到这篇文章后，我删除了插件并重新安装了它。这解决了我的问题谢谢！！！

【参考方案2】：

您可以直接进入 config .xml 文件并编辑此行

<access origin="*://*/*" />

并且您可以在控制台中调用任何数据而不会中断 CORS 谢谢，请将此代码应用到您的离子应用程序