CORS 问题 (IONIC 3)答案

【问题标题】：CORS Issues (IONIC 3)CORS 问题 (IONIC 3)
【发布时间】：2018-02-09 09:43:15
【问题描述】：

我正在尝试在 livereload 模式下处理 CORS 问题，但我无法找到合理的解决方案。我的后端是用 Java 开发的，它在 localhost 上运行。

命令：

ionic cordova 模拟 ios -l -c -s --address 127.0.0.1

ion.config.json：

{
  "name": "Smartmarket",
  "app_id": "",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [{
        "path": "/SmartmarketWeb/endpoint",
        "proxyUrl": "http://127.0.0.1:8080/SmartmarketWeb/endpoint"
  }]
}

请求示例：

let headers = new Headers({ 
    'Content-Type': 'application/json'
});
let options = new RequestOptions({ headers: headers });
return this.http.post('http://127.0.0.1:8080/SmartmarketWeb/endpoint/login', json, options)
    .timeout(TIMEOUT_REQUEST*1000)
    .map(this.extractData)
    .do(this.logResponse)
    .catch(this.handleError);

错误：

有人可以帮帮我吗？我尝试了许多解决方案，但是，它们都没有效果。

【问题讨论】：

应该指定 CORS 标头的是您的服务器端而不是您的客户端
@Liam 谢谢你的回答，但是不使用livereload模式（在IOS模拟器和真机中）如何正常工作？
@Liam 指出客户端不是指定 CORS 标头的地方。所以你需要从你的请求代码中删除'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', 'Access-Control-Allow-Credentials': true, 'Access-Control-Allow-Headers': 'origin, content-type, accept'。在你的前端 JavaScript 代码中添加这些不会有任何影响，只会进一步破坏事情
你是对的，我在服务器端应用了解决方案，它确实有效。

标签： ios angular http cors ionic3

【解决方案1】：

仅解决方法 - 不是完美的解决方案

我运行时遇到了同样的问题，我的 ionic 3 应用程序与 ASP.net 后端运行得很好，它不能与 IOS 一起使用（Iphone x - IoS 11 模拟器）。

解决方案

我更改了我的 ionic 应用程序的 web view 选项。

首先，打开 config.xml 并添加以下属性

<feature name="CDVWKWebViewEngine"> <param name="ios-package" value="CDVWKWebViewEngine" /> </feature> <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

然后删除所有插件和平台，然后运行或构建您的应用程序

this url中给出的详细步骤

【讨论】：

这是推荐的解决方案。使用原生插件

【解决方案2】：

问题出在服务器端。遵循以下解决方案（Java - Jersey 2）：

过滤器类：

@Provider
public class CORSResponseFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");    
        headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");          
        headers.add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
        headers.add("Access-Control-Allow-Credentials", "true");


    }

}

web.xml：

<servlet>
    <servlet-name>Endpoint</servlet-name>
    <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
    <init-param>
        <param-name>jersey.config.server.provider.packages</param-name>
        <param-value>com.smartmarket.endpoint</param-value>
    </init-param>
    <init-param>
            <param-name>jersey.config.server.provider.classnames</param-name>
            <param-value>com.smartmarket.filter.CORSResponseFilter</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

【讨论】：

【解决方案3】：

最佳解决方案：

选项 1)

对于离子 v2 或 v3 ： https://ionicframework.com/docs/v3/native/http/

对于cordova/phonegap： https://github.com/silkimen/cordova-plugin-advanced-http

选项 2)

在服务器上启用 CORS。

【讨论】：