来自角度外部服务器的 API 没有“Access-Control-Allow-Origin”标头错误

Question

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

从源“http://127.0.0.1:4200”访问“https://api.smartship.io/ship/rates”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我的服务：

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);
  }
);

Answer 1

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

启用它，然后发送请求。 在大多数情况下应该有效。

如果有效，那么我们可以断定这是后端问题。

如果您使用的是 Node，那么您可以在 app.js 中允许 localhost（我使用 CORS 库也是如此）。 如果没有，那么您可以在此处搜索您正在使用的语言，或者在该语言域下提出问题。

Answer 2

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

访问您的应用程序

 http://localhost:4200 

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

 127.0.0.0 myapp.com 

然后使用 myapp.com 作为域名

http://myapp.com:4200