离子CORS问题

Posted

技术标签:

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

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

1. ionic serve2. 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 android3. 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 标头,而不是请求标头。它们根本不属于您的请求选项!由于您使用的是代理,因此响应中甚至不需要它们。您一定是错误配置了代理。 【参考方案1】:

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

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

【讨论】:

以上是关于离子CORS问题的主要内容,如果未能解决你的问题,请参考以下文章

离子4中的Cors问题

离子:IOS模拟器有点奇怪的CORS问题

android live设备上的离子和电容器的CORS问题

IOS CORS问题离子1项目和android工作完美

处理离子中的CORS问题

由于cors,离子应用程序无法连接到php应用程序