来自外部服务器的api的angular的'Access-Control-Allow-Origin'标头错误

时间:2019-07-15 11:05:47

标签: angular api httpclient

我想要一个带有外部服务器的API。当我使用邮递员程序时,很容易回答。但是当我在Angular代码中执行此操作时,它会响应以下错误:

Access to XMLHttpRequest at 'https://api.smartship.io/ship/rates' from origin 'http://127.0.0.1:4200' 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.

我的服务:

let api_url = this.api_url_flagship + '/con';
let headers = new HttpHeaders({
  'x-smartship-token': this.token_flagship,
  'Content-Type': 'application/json'
});

const httpOptions = {
    headers
};


return this.httpClient.post(api_url, data, httpOptions)    
  .map(
    (response: Response) => {
      const data = response.json();
      return data;
    }
  )
  .catch(
    (error: Response) => {
    let rr = error.json();
    return Observable.throw(rr);
  }
);

2 个答案:

答案 0 :(得分:1)

为确保这是一个后端问题,请使用此插件https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

启用它,然后发送请求。 在大多数情况下应该可以使用。

如果有效,那么我们可以得出结论,这是后端问题。

如果您正在使用node,那么您可以在app.js中允许localhost(我使用CORS库也是如此)。 如果不是,则可以在其中搜索您正在使用的语言,或者在该语言域下提出问题。

答案 1 :(得分:0)

该问题来自API服务器端,不接受来自127.0.0.1的请求,因此请尝试使用

来访问您的应用
 http://localhost:4200 

如果不起作用,请尝试将主机文件数据记录更改为此

 127.0.0.0 myapp.com 

然后使用myapp.com作为域名

http://myapp.com:4200