生产环境构建后在设备上出现CORS错误

Question

我使用以下CLI构建了Ionic 4应用程序：

ionic cordova build android --prod

service.ts

  get(): Observable<any> {
   return this.http.get("http://api.openweathermap.org/data/2.5/forecast?lat=52.974431&lon=70.2398363&appid=myapi&units=metric");
  }

为什么它仍然会产生CORS错误？

引用： XMLHttpRequest访问“http://api.openweathermap.org/data/2.5/forecast?lat=52.974431&lon=70.2398363&appid=myid&units=metric”从源“http://localhost:8100”被CORS策略阻止：响应中“Access-Control-Allow-Origin”头的值在请求的凭据模式为“include”时不能为通配符“*”。 XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

据我所知，它应该在设备上无误地运行，对吗？为什么它在设备上仍然显示http://localhost:8100？根据this doc的说法，它应该在设备上正常工作，对吗？

注意：我使用 chrome://inspect/#devices 来获取上述错误吗？

- Sampath

---

你的应用程序是否有一个拦截器，在所有请求上添加withCredentials: true选项？ - R. Richards

因为错误使得看起来像是在HTTP GET调用期间传递了withCredentials: true，而实际上并不需要。一个添加该选项的拦截器可以解释这个问题。 - R. Richards

@R.Richards 说得好。但这并不是我的问题。稍后我会给出完整的答案。谢谢。 - Sampath

如果您已经解决了这个问题，请更新它，因为我之前也遇到过类似的错误，但现在我正在使用HTTP Cordova插件。 - Utpaul

@Sampath，请立即检查一下。 - Utpaul

Answer 1

最近我遇到了同样的问题，但是我通过在Android和iOS设备上使用cordova-plugin-advanced-http解决了它。 安装

ionic cordova plugin add cordova-plugin-advanced-http
npm install @ionic-native/http

Use

import { HTTP } from '@ionic-native/http/ngx';

constructor(private http: HTTP) {}

...

this.http.get('http://ionic.io', {}, {})
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });

更多细节：请查看官方链接。

- Utpaul

---

请将此更新为Ionic 4，因为我正在使用它。https://ionicframework.com/docs/native/http - Sampath

@Sampath 现在请检查一下 - Utpaul