所请求的资源上不存在“ Access-Control-Allow-Origin”标头-Angular 5 [英] No 'Access-Control-Allow-Origin' header is present on the requested resource - Angular 5

问题描述

我正尝试通过设置了跨域相关标头的角度服务来访问我的角度服务。但是，我仍然无法访问网络服务。浏览器一直在说，

I'm trying to access web service from my angular service with cross-origin related headers set. But still, I'm not able to access the web service. The browser keeps saying,

对预检请求的响应未通过访问控制检查：没有'Access-Control-Allow-Origin'标头存在于请求的资源上。因此，不允许访问来源 http：// localhost：4200。响应的HTTP状态代码为403。

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

I'm able to access the same URL in the browser (chrome) and postman but not in angular application.

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

}

我有东西吗？ m在这里丢失了...

Is there anything I'm missing here...

推荐答案

因此，有两种方法

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

1. If you have an access to edit the web service.

您需要允许跨源资源共享。

You need to allow Cross Origin Resource sharing. if u are using Node.js here is an example of code to add

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

您可以添加一个浏览器扩展程序，该扩展程序可以在运行时修复Angular应用程序的CORS错误

You can add a browser extension that enables you fix CORS errors for the angular app while running on browser.

此处是chrome > https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi？

Here is for chrome https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

此处是Mozilla的 https://addons.mozilla.org/zh-CN/firefox/addon/cors-everywhere/

Here is for Mozilla https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

您可以在 https://enable-cors.org/

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

I hope that helps. If there is any error let me know through comments.

这篇关于所请求的资源上不存在“ Access-Control-Allow-Origin”标头-Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！