IONIC 3 CORS 问题

Question

我在尝试对 API 进行 GET 调用时遇到了 Ionic 3 的 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

请求网址

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

主要问题 我的电话失败了。如何为此问题创建代理？

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 调用。

谢谢。

Answer 2

如果您想在 Chrome 中进行测试，只需安装 chrome 扩展 Allow control origin 快速简便的方法

Answer 3

要在开发环境中测试，您可以在disable-web-security 模式下运行谷歌浏览器。

要遵循的步骤（在 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

Answer 4

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

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

Answer 5

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

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

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);
}
```

---

Answer 7

在浏览器中调试时，您可以通过使用 CORS 扩展或禁用 Chrome 的安全性来处理 CORS。 但是当您在服务器端的应用程序中调试时需要处理 CORS，我正在使用 woo-commerce API，所以我将其编辑如下->

1.Plugins->editor->woocomerceapi

紧接着

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

2.更新文件