离子CORS问题答案

【问题标题】：Ionic CORS issue离子CORS问题
【发布时间】：2019-05-29 19:25:37
【问题描述】：

正如预期的那样，我正面临 CORS 问题

1. ionic serve 和
2. ionic cordova run android
3. ionic cordova build android --debug

我使用

解决了 1. ionic serve 的问题

ionic.config.json 中的本地代理

as per this blog https://blog.ionicframework.com/handling-cors-issues-in-ionic/

"proxies": [
{
  "path": "/proxy",
  "proxyUrl": "https://xx.xx.xx/"
}
]

在我的 POST 调用中设置 Access-Control-Allow-Origin 标头，例如：

reqOpts = {
        headers: new HttpHeaders({
          'Content-Type':'application/json',
          'Access-Control-Allow-Origin':'*',
          'Access-Control-Allow-Methods':'POST, GET, PUT, OPTIONS, DELETE, PATCH',
          'Accept':'application/json',
        })
      };

但是使用2. ionic cordova run android 和3. ionic cordova build android --debug 我仍然有以下错误：

01-02 15:49:48.815 3682-3889/com.xx.xx D/SERVER: Handling local request: http://localhost:8080/proxy/xx/login
01-02 15:49:48.859 3682-3682/com.xx.xx D/SystemWebChromeClient: http://localhost:8080/build/main.js: Line 834 : [object Object]
01-02 15:49:48.859 3682-3682/com.xx.xx I/chromium: [INFO:CONSOLE(834)] "[object Object]", source: http://localhost:8080/build/main.js (834)
01-02 15:49:48.863 3682-3682/com.xx.xx D/SystemWebChromeClient: http://localhost:8080/build/vendor.js: Line 1823 : ERROR
01-02 15:49:48.864 3682-3682/com.xx.xx I/chromium: [INFO:CONSOLE(1823)] "ERROR", source: http://localhost:8080/build/vendor.js (1823)

该博客还提到，创建 APK cors 不会成为问题。但是如果我删除代理并使用3. ionic cordova build android --debug制作一个APK

Access to XMLHttpRequest at 'https://xx.xx.xx/xx/login' 
from origin 'http://localhost:8080' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. main.js:835

出现 Cors 问题。为什么我的 APK 会出现这种情况？设备上不应该使用来自 file:// 而不是 localhost:// 的资源，从而避免 CORS 问题吗？

我该怎么做

一个。修复cors错误

或

b.使代理适用于 APK 构建。

奇怪的是服务器回复有 Access-Control-Allow-Origin

Server →nginx/1.10.3 (Ubuntu)
Date →Thu, 03 Jan 2019 14:25:23 GMT
Content-Type →application/json
Content-Length →1010
Connection →keep-alive
Access-Control-Allow-Origin →*
Access-Control-Allow-Methods →POST

离子版本：4.5.0

操作系统：Mac OSX Mojave

平台：安卓

【问题讨论】：

您需要有权访问您的登录服务器。在那里你需要设置 CORS，你需要在那里设置 Allowed Origins
网络服务来自第三方。这可以从我们这边处理吗？
有一个名为“AllowCorsEverywhere”的网站可以帮助您。此 cors 错误的下一个原因是您通过 localhost 上的 http 发出请求。也许登录服务器上的安全设置不接受 http 请求。仅 https 请求
顺便说一句，您是否根据您的要求设置了 Access-Control-Allow-Origin 标头？
Access-Control-Allow-* 是 response 标头，而不是请求标头。它们根本不属于您的请求选项！由于您使用的是代理，因此响应中甚至不需要它们。您一定是错误配置了代理。

标签： angular ionic-framework cors ionic3

【解决方案1】：

如果您无法更改服务器设置，您将始终在 WKWebview 上遇到 CORS 问题，您无法通过客户端执行此操作。建议，改成ionic原生http

https://ionicframework.com/docs/v3/native/http/

【讨论】：