所请求的资源上不存在“ Access-Control-Allow-Origin”标头-Angular 5

Question

我正在尝试通过具有跨域相关标头集的我的角度服务访问Web服务。 但是，我仍然无法访问Web服务。 浏览器一直在说，

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

我可以在浏览器（chrome）和邮递员中访问相同的URL，但在角度应用程序中不能访问。

private headers = new HttpHeaders()
.set('Access-Control-Allow-Origin', '*')
.set('Content-Type', 'application/json;charset=UTF-8')
.set('Access-Control-Allow-Headers', '*')
.set('Access-Control-Allow-Methods', 'GET, OPTIONS');

public getData(): Promise<Object> {
  return this._http.get(this._url, {headers: this.headers})
  .toPromise()
  .then(response => {
      return response;
    }
  )
  .catch(testService.handleError);

}

有什么我想念的吗...

Answer 1

因此，有两种方法

1. 如果您有权编辑Web服务。

   您需要允许跨源资源共享。 如果您使用的是Node.js，这是添加代码的示例

    // ~ Cross origin resource sharing ~ // var cors = require('cors'); // ~ Initialize the app ~ // var app = express(); // ~ Enbling CORS ~ // app.use(cors()); 

2. 您可以添加浏览器扩展程序，以便在浏览器上运行时修复角度应用程序的CORS错误。

这是适用于Chrome浏览器的https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=zh-CN

这是针对Mozilla https://addons.mozilla.org/zh-CN/firefox/addon/cors-everywhere/

您可以在https://enable-cors.org/上了解更多信息。

---

希望对您有所帮助。 如果有任何错误，请通过评论告知我。

Answer 2

有多种方法可以解决此问题，但是首先，您需要确定客户端正在发送的额外请求标头参数（如果有）。

现在可以通过使用浏览器的任何开发人员控制台来发现它。 另一个指针是检查响应/错误是否有options调用。

一旦确定，您将需要从服务器启用适当的响应参数，在这种情况下，似乎选项调用未在响应中设置Access-Control-Allow-Origin 。

让我知道这是否有助于您诊断问题。

Answer 3

尝试JSONP。 基本上按照WC3Schools的规定

JSONP是一种发送JSON数据而无需担心跨域问题的方法。

JSONP不使用XMLHttpRequest对象。

这是JSONP工作原理的解释