角度外部服务器的 api 没有“Access-Control-Allow-Origin”标头错误答案

【问题标题】：No 'Access-Control-Allow-Origin' header error for an api from an external server in angular角度外部服务器的 api 没有“Access-Control-Allow-Origin”标头错误
【发布时间】：2019-07-15 11:05:47
【问题描述】：

我想要一个带有外部服务器的 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);
  }
);

【问题讨论】：

AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource的可能重复
与 CORS 问题的其他人一样 - 您需要代理，或者为您的客户端正确配置服务器。
@jonrsharpe 我应该联系服务器接受域

标签： angular api httpclient

【解决方案1】：

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

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

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

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

【讨论】：

感谢您的回答。我这样做了，但我又看到了那个错误。是我的角度代码的问题吗？

【解决方案2】：

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

访问您的应用

 http://localhost:4200

如果它不起作用尝试将主机文件数据记录更改为那个

 127.0.0.0 myapp.com

然后使用 myapp.com 作为域名

http://myapp.com:4200

【讨论】：

谢谢，但没有一个没有用。