Question

我正在开发一个角度为5的Ionic应用程序，我使用命令ionic serve -l

在localhost中运行它

我打电话给外部网络https://example.com/api?req1=foo&req2=bar

但是我收到了CORS拒绝的消息，没有回应。

无法加载https://example.com/api?req1=foo&req2=bar：CORS政策阻止了从“https://example.com/api?req1=foo&req2=bar”到“http://example.com/api?req1=foo&req2=bar”的重定向：没有'Access-Control-Allow-Origin'标头出现在请求的资源。因此，不允许原点“http://localhost:8100”访问。

请求代码很简单：

getSomethingList(req1: number, req2: number): Observable<Item[]> {
    const requestUrl = 'https://example.com/api?req1=foo&req2=bar';
    return this._http.get(requestUrl).map((res: Response) => res.json());
}

我尝试安装Chrome扩展程序Moesif Origin & CORS changer我已将其激活并将原点放在http://localhost:8100/（运行我的离子应用程序的位置）。仍然没有结果，但现在我没有看到被拒绝的CORS错误，我看不出任何错误。

我尝试了代理：

// file ionic.config.json
{
  "name": "movielovers",
  "app_id": "",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [{
      "path": "/api",
      "proxyUrl": "https://example.com/api"
   }]
}

然后将const requestUrl = 'https://example.com/api?req1=foo&req2=bar'更改为const requestUrl = '/api?req1=foo&req2=bar'，我仍然不知道我在做什么，对我来说没有任何意义，但这是我理解阅读一些教程。< / p>

很明显，我收到错误：

获取http://localhost:8100/api?req1=foo&req2=bar 404（未找到）

我尝试安装nom corsproxy：npm install -g corsproxy并在命令行中运行corsproxy。这将在端口中启动服务器。但这不起作用。我甚至尝试将ionic.config.json文件中的corsproxy与代理混合，但没办法。永远不会得到答案。

最后我尝试了jsonp：

首先在app.module.ts中import { JsonpModule } from '@angular/http';，然后在导入中声明JsonpModule。
然后在我收到请求的提供者中注入Jsonp库constructor(private jsonp: Jsonp) {}
我在请求网址末尾添加了一个回调：const requestUrl = 'https://example.com/api?req1=foo&req2=bar&callback=JSONP_CALLBACK'
更改请求方法： return this.jsonp.request（requestUrl）.map（（res：Response）=＆gt; res.json（））;

使用jsonp控制台中的错误是：

Uncaught SyntaxError：意外的令牌：

我不知道还有什么尝试，因为CORS我无法得到任何回复。我请求的api不受限制，就像回复邮递员一样，甚至直接在浏览器中写入请求URL。但是当从localhost运行时，它显然被阻止了，我无法克服它，并且我正在失去大量时间来尝试获得响应。我需要一些帮助。

离子：3.20.0
科尔多瓦
Angular CLI：1.7.3
节点：8.9.4

仅供参考：我正在使用的api是https://www.comicvine.com/api

修改安装了cordova-plugin-whitelist

将<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline' 'unsafe-eval'">添加到www / index.html

文件config.xml包含以下行：

<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="*" />

Answer 1

最后我解决了它，首先我将所有代码返回到初始点（删除所有代理引用，jsonp等等），我得到了CORS否认答案。然后，我删除了Chrome扩展程序Moesif Origin & CORS changer并安装了Chrome扩展程序Allow-Control-Allow-Origin: *，将其打开，现在它正常工作。

将来可能会对某人有所帮助，并为他/她节省很多时间。

Answer 2

在代理中更改Config.xml文件并添加新的配置属性：

<allow-navigation href="http://*/*" />
<allow-intent href="https://*/*" />

如果这不起作用你可以安装cordova然后添加'cordova插件添加cordova-plugin-whitelist'：

1 - 将<allow-navigation href="*" />添加到config.xml

2 - 将<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline' 'unsafe-eval'">添加到index.html的标头

Answer 3

必须在服务器端正确处理CORS。当你不拥有服务器端时，你只能为CORS设置一个代理来正确处理来自你的应用程序的请求并将它们重定向到api（一个简单的php脚本可以解决这个问题）但是有很多可以使用的解决方案{{ 3}}

您无法停用CORS。它是一种安全性特征＆＃34;来自底层的webview。

关于npm corsproxy的具体问题，请尝试

不要使用离子代理设置。
在命令行上运行corsproxy。
将您的API呼叫更改为out there，其中my.domain.com/ ..是您在漫画中已使用的服务器和路径

当这不起作用时，尝试使用即用型解决方案列表中的内容。

离子应用程序被CORS策略阻止，jsonp无法正常工作

3 个答案: