离子CORS问题
Posted
技术标签:
【中文标题】离子CORS问题【英文标题】:Ionic CORS issue 【发布时间】: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 标头,而不是请求标头。它们根本不属于您的请求选项!由于您使用的是代理,因此响应中甚至不需要它们。您一定是错误配置了代理。
【参考方案1】:
如果您无法更改服务器设置,您将始终在 WKWebview 上遇到 CORS 问题,您无法通过客户端执行此操作。建议,改成ionic原生http
https://ionicframework.com/docs/v3/native/http/
【讨论】:
以上是关于离子CORS问题的主要内容,如果未能解决你的问题,请参考以下文章