IONIC 3 CORS问题

Question

当我试图使用Ionic 3向API发出GET调用时，我遇到了CORS问题。我正在使用Ionic本地服务器，在命令行中运行ionic serve以进行实时服务器。

错误: 请求的资源上没有'Access-Control-Allow-Origin'头。因此不允许来源为'http://localhost:8100'的访问。

我尝试更新ionic.config.json中的代理设置，但似乎并没有起作用。

{
  "name": "projectLeagueApp",
  "app_id": "47182aef",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path":"/games",
      "proxyUrl": "https://api-2445582011268.apicast.io/games/"
    }
  ]
}

我的数据服务

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class DataProvider {

  headers = new Headers({'user-key': '1234567890123'});
  options = new RequestOptions ({headers: this.headers}); 
  limit: number = 50;

  constructor(public http: Http) {
    console.log('Hello DataProvider Provider');
  }

  getGames(genre, offset_num) {

    let genre_id = genre;
    let offset = offset_num;

    return this.http.get('https://api-2445582011268.apicast.io/games/?fields=name,release_dates,screenshots&limit='+this.limit+'&offset='+offset+'&order=release_dates.date:desc&filter[genres][eq]='+genre_id+'&filter[screenshots][exists]', this.options)
  }

}

我正在尝试调用这个api

请求URL

https://api-2445582011268.apicast.io
HEADERS
Key Value
user-key    YOUR_KEY
Accept  application/json

主要问题 我的电话通不过。我该如何为此问题创建代理？

- Chris Simmons

---

尝试将http.get请求中的URL更改为/games。代理将用真实的URL替换它。 - emroussel

请处理Ionic中的CORS问题 - Ari

可能是在Ionic中处理CORS问题的重复问题。 - Ari

Answer 1

为解决此问题，请更改以下行：

ionic.config.json

{
  "name": "projectLeagueApp",
  "app_id": "47182aef",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path":"/games",
      "proxyUrl": "https://api-2445582011268.apicast.io/games"
    }
  ]
}

您需要移除 "proxyUrl" 结尾处的 " / " 符号。

我的数据服务

return this.http.get('/games/?fields=name,release_dates,screenshots&limit='+this.limit+'&offset='+offset+'&order=release_dates.date:desc&filter[genres][eq]='+genre_id+'&filter[screenshots][exists]', this.options)

在http调用中，url应以“/games”开头。之所以是“/games”，是因为Ionic将代理http://localhost:<port>/games到https://api-2445582011268.apicast.io/games

请在您的应用程序中使用上述方法进行外部GET和POST调用。

谢谢。

- Alvin Chettiar

---

很高兴能够帮助。@ChrisSimmons 请点赞此答案，这样有类似问题的开发者可以从中获得解决方案。 - Alvin Chettiar

友情提示 - 在对ionic.config.js进行更改后，请记得运行ionic serve或ionic lab - 它不像其他代码更改那样立即生效，需要“重新启动” :) - Grant

@Emulic 正确 - 只需按下 CMD + C 或 CTRL + C，取消正在运行的服务，确保代理更改已生效，然后再次运行 ionic serve 或 ionic lab。处理它就像一个别名，必须提交并重新启动服务才能使用它。 - Grant

@Emulic，你能把你的代码复制粘贴到这里吗？这样我们就可以找出哪些地方需要修复了。 - Alvin Chettiar

@Alvin Chettiar。谢谢。我已经做了这些更改，但是当我运行ionic lab时出现错误“无法读取项目的ionic.config.json文件：参数“url”必须是字符串，而不是未定义的”，但是我没有url参数。这是我的文件：{ "name": "ionicStarWarsApp", "app_id": "", "type": "ionic-angular", "integrations": { "cordova": {} } , "proxies": [ {"path": "/api", "proxyURL": "https: //swapi.cp/api"} ]}（注意：我在我的评论中留了一个空格，以便正确显示proxyURL） - Sarah

Answer 2

为了在开发环境中进行测试，您可以以禁用Web安全模式运行Google Chrome。

按以下步骤操作（适用于Windows）

• 按下Windows键 + R打开“运行”窗口。
• 输入以下命令并按Enter键。

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

按以下步骤操作（适用于Ubuntu）

• 在运行/执行之前关闭所有chrome.exe实例。

chromium-browser --disable-web-security --user-data-dir="[some directory here]"

• 在Chrome 48之前

chromium-browser --disable-web-security

按以下步骤操作（适用于Mac）

• 在终端中运行以下命令。

open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir http://localhost:8100/ --disable-web-security

- Raghav Dinesh

Answer 3

如果您想在Chrome中进行测试，只需安装Chrome扩展程序允许控制来源即可。这是一种快速简便的方法。

- Saurabh Ahuja

Answer 4

当我从Play商店更新Android System Webview时，我的CORS问题得到了解决。 我尝试使用Cordova-Advance-HTTP插件，但我的PUT请求无法正常工作。

在更新Android System Webview后，我使用了之前使用的HTTP Client插件。更新Android System Webview帮助我解决了CORS问题。

- pawan vedak

Answer 5

代理功能期望您引用本地服务器。在您的 GET 请求中，您仍然指向远程 API。如果您将代码更改为 this.http.get('/games/...'，它应该开始正常工作，因为请求将发送到 http://localhost:8100/games...，而“代理”选项将捕获并传递给您提供的 URL。

您可能还只需要将https://api-2445582011268.apicast.io放入 proxyUrl 字段中。我想其余路径是直通的。

- Jeff Woodard

---

嘿，杰夫，我已经按照你的要求做了。我将proxyUrl更改为'https://api-2445582011268.apicast.io'，现在不再收到CORS问题。但是，我现在遇到了另一个问题。我收到了一个新的错误 -“运行时错误：JSON中位置0处的意外标记H”。我不确定为什么会出现这个错误。 - Chris Simmons

通过Chrome开发者工具的网络选项卡查看您的请求。HTTP响应代码是什么？您可能会在那里看到更多信息。此外，不确定是否在控制台中看到任何指示代理正在处理请求的内容。也许有更多信息。另外，我建议使用ARC或Postman或一些REST客户端来命中您配置类似于网络选项卡的代理服务。在那里调试API调用可能更容易。 - Jeff Woodard

Answer 6

---

```
export function getAuthHttp(http: Http, options: RequestOptions) {
  console.log("token",storage.get('id_token'));
  return new AuthHttp(new AuthConfig({
          headerName: 'Authorization',
          headerPrefix: 'bearer',          
          tokenName: 'id_token',
          tokenGetter: (() => storage.get('id_token')),
          noJwtError: true,    
          //globalHeaders: [{'Accept': 'application/json'}],
          globalHeaders: [{'Content-Type':'application/json'},{"Access-Control-Allow-Origin": "*"}],
         
        }), http, options);
}
```

---

- user9006594

Answer 7

在浏览器中调试时，您可以使用CORS扩展或禁用Chrome的安全性来处理CORS。但是，在服务器端调试应用程序时，您需要处理CORS。我正在使用Woo-commerce API，因此我进行了以下编辑->

1.Plugins->editor->woocomerceapi

紧接着

<?php**
header(“Access-Control-Allow-Origin: *”);   

2.更新文件

- Musab