如何更改使用 angular 6、ionic 4 作为前端和 scala 作为后端的混合应用程序的 CORS 策略？答案

【问题标题】：How to change CORS policy for hybride app which uses angular 6 ,ionic 4 as frontend and scala as backend?如何更改使用 angular 6、ionic 4 作为前端和 scala 作为后端的混合应用程序的 CORS 策略？
【发布时间】：2018-12-21 03:18:06
【问题描述】：

我正在尝试使用 post 方法进行登录，代码如下：

log(data){
    let vals =  JSON.stringify(data.value);
    let headerOptions = new HttpHeaders();
    headerOptions.append('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
    return this.http.post("http://IP_server:88/mLog" , vals, { headers: headerOptions}).pipe(tap(
    res=>{ console.log('data: '+res) },
    err=> console.log(err) ));
}

我收到如下错误：

从源“http://localhost:8080”对“http://IP_server:88/mLog”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

【问题讨论】：

标签： angular scala ionic-framework

【解决方案1】：

Ionic 应用程序（android、ios 和 ionic serve）在本地主机上运行。默认情况下，web api 不允许来自不同来源的请求。

所以你有 3 个选择：

允许在 Web api / 服务器中进行跨源请求。
在离子应用程序link 中设置代理。我试过它在android而不是在ios中工作。
使用离子原生 http link（推荐）它会在两者中解决。

【讨论】：

【解决方案2】：

您可以从浏览器中点击网址并获得预期的响应吗？
如果是，则无需更改 UI/Javascript 代码。
需要从服务器端/Java 代码启用 CORS 过滤器。

【讨论】：

不，我仍然收到以下错误，Action not found 404 in browser.
如果您收到 404，则表示该服务/页面不可用。检查是否有任何服务可用于 IP_server:88/mLog。重新验证网址

【解决方案3】：

在 Angular 6 中，您必须使用 httpClient 标头来传递所有端点标头。下面是函数：

  getHeader() {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        "Access-Control-Allow-Origin": "*"
      })
    };
    return httpOptions;
  }

调用此函数并将 httpOptions 传递给所有端点。否则，您必须在 java 端进行更改..他们必须为跨源设置标头。

【讨论】：

不，我仍然收到如下错误：OPTIONS http://Ip_server:88/mLog 404（未找到）无法加载Ip_server:88/mLog：预检响应具有无效的 HTTP 状态代码 404。