离子应用程序被 CORS 策略阻止，jsonp 也不工作

Posted 2023-03-04

【中文标题】离子应用程序被 CORS 策略阻止，jsonp 也不工作

【英文标题】：ionic app blocked by CORS policy, jsonp not working neither

【发布时间】：2018-09-30 09:00:09

【问题描述】：

我正在开发一个 Angular 5 的 Ionic 应用程序，我使用命令 ionic serve -l 在 localhost 中运行它

我有一个外部网站https://example.com/api?req1=foo&req2=bar的接听电话

但我收到 CORS 被拒绝消息并且没有响应。

无法加载 https://example.com/api?req1=foo&req2=bar：从“https://example.com/api?req1=foo&req2=bar”重定向到“http://example.com/api?req1=foo&req2=bar”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 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/ （运行我的 ionic 应用程序的位置）。仍然没有结果，但现在我没有看到被拒绝的 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'，我还是不知道这个是干什么用的，对我来说没有意义，但是看了一些教程就明白了。

这样显然，我得到了错误：

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

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

最后我尝试了 jsonp：

首先我在 app.module.ts 中 import JsonpModule from '@angular/http'; 并在导入中声明 JsonpModule。

然后在我有请求的提供程序中注入 Jsonp 库 constructor(private jsonp: Jsonp)

我在请求url末尾添加回调：const requestUrl = 'https://example.com/api?req1=foo&req2=bar&callback=JSONP_CALLBACK'

更改请求方法： return this.jsonp.request(requestUrl).map((res: Response) => res.json());

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

Uncaught SyntaxError: Unexpected token :

我不知道还能尝试什么，由于 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="*" />

【参考方案1】：

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

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

或者如果这不起作用，您可以安装cordova，然后添加'cordova plugin add cordova-plugin-whitelist'：

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

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

【讨论】：

我打算将这些行添加到 config.xml 但它们已经存在。我也在使用cordova，所以我安装了cordova-plugin-whitelist并添加了两个点仍然相同的CORS错误。我添加了编辑问题的更改。

【参考方案2】：

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

您不能禁用 CORS。这是来自底层 webview 的安全“功能”。

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

不要使用离子代理设置。 在命令行上运行 corsproxy。 将您的 api 调用更改为 http://localhost:1337/my.domain.com/path/to/resource 其中 my.domain.com/.. 是您已经在 Comicvine 使用的服务器和路径

如果这不起作用，请尝试现成的解决方案列表中的某些内容。

【讨论】：

好的，我运行 corsproxy（在 1337 端口上运行），我向http://localhost:1337/www.comicvine.com/api/characters?api_key=myapikey&format=json 发出请求，但我仍然遇到 cors denied 问题。 Failed to load http://comicvine.gamespot.com/api/characters?api_key=myapikey&format=json: Redirect from 'http://comicvine.gamespot.com/api/characters?api_key=myapikey&format=json' to 'https://comicvine.gamespot.com/api/characters?api_key=myapikey&format=json' has been blocked by CORS policy: No 'CORS' header is present on the requested resource. Origin 'null' is therefore not allowed access.

在运行 corsproxy 的终端中，我可以阅读：proxy to https://www.comicvine.com/api/characters 180421/104124.918, [response], http://localhost:1337: get /api/characters "api_key":"myapikey","format":"json" 301 (576ms)

我将我的 api 密钥更改为 apikey，我的请求有额外的参数作为限制和偏移量，我试着简化一下。

【参考方案3】：

最后我解决了它，首先我将所有代码返回到初始点（删除所有代理引用、jsonp 等），在那里我得到了 CORS 拒绝答案。然后我删除了chrome扩展Moesif Origin & CORS changer，安装了chrome扩展Allow-Control-Allow-Origin: *，打开就可以了。

也许它会在未来帮助某人，并为他/她节省很多时间。