离子应用程序无法使用 $http 连接启用 cors 的服务器 [英] ionic app cannot connect cors enabled server with $http

问题描述

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

I am trying to build a mobile app with ionic framework. When my application tries to connect server to get json ( server is web api and cors is enabled) it just returns 404 on genymotion and real device. But when I run application in browser with ionic serve everything work fine.

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

I am pretty sure CORS is functional. Here response header I got while application working in browser.

回复

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 在配置中有 这一行

Config.xml has <access origin="*"/> this line in configuration

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

in my app.js I removed X-Requested-With headers for all http calls.

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

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

我在我的工厂类中简单地使用了对服务器的请求.

I simple use get requests to server in my factory classes.

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

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

When I run application in Genymode or real device, response is 404 and statusText is 'not found'. I am pretty sure web api is working, the cause for this behaviour is in ionic based apps, my app is local file and protocol is file:/// so Origin header is null the in request, then server returns 404. I also tried a local file without any server I get the same error like in application.

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

我错过了什么吗?

推荐答案

cordova-plugin-whitelist 目前似乎是强制性的".

cordova-plugin-whitelist seems to be "mandatory" at present.

安装:

cordova plugin add cordova-plugin-whitelist

配置config.xml

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

You can keep your current setup with * or change for more restrictive rules

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

add a html policy on index.html, you shall add a Policy also. To authorise everything, here it is :

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

这篇关于离子应用程序无法使用 $http 连接启用 cors 的服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！