angular-cli“localhost:4200"没有访问控制允许来源 [英] No Access-Control-Allow-Origin for angular-cli "localhost:4200"

问题描述

我有一个与 CORS 和所需标头相关的问题.

I have a problem related to CORS and the needed headers.

设置我运行一个 angular 项目和 angular-cli (localhost:4200) 我想通过 HTTP 请求访问来自 WebService 的 JSON.当我直接在浏览器中使用 URL 时，一切正常，JSON 显示.一旦我从我的 angular-app 发送请求，我就会收到以下错误:

Setup I run a angular project und angular-cli (localhost:4200) I want to access a via a HTTP-Request a JSON from a WebService. When I using the URL direct in the browser everything is fine and the JSON gets displayed. As soon as I send the request from my angular-app I get the following error:

  XMLHttpRequest cannot load http://t00-holcim:8888/deliveries?fields=liefer_nr,dispo_nr,lieferscheinsta…r,empfaenger_nr,bestellinfo1,bemerkung&limit=3&deliveryNoteDate=2017-04-27. 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.

这是程序代码:

....... 
const headers = new Headers(); 
headers.append('Content-Type', 'application/json; charset=utf-8'); headers.append('Access-Control-Allow-Origin', '*'); 
const options = new RequestOptions({ method: RequestMethod.Post, headers: headers });

this.http.get(this.buildURLString(), options).map(this.extractData)
              .subscribe((data) => {........}

上网查了一下，发现错误与CORS有关.因此我附加到标题 headers.append('Access-Control-Allow-Origin', '*');但这无济于事.

I searched the net and I found that the error is related to CORS. Therefore I append to the header headers.append('Access-Control-Allow-Origin', '*'); but this does not help.

我获得了 Chrome 的扩展 CORS 并启用了启用跨源资源共享"但它没有帮助.

I got extension CORS for Chrome and enable "Enable cross origin resource sharing" but it didn't help.

这是服务器端还是客户端的配置更改.

Is this a configuration change on the server side or client side.

推荐答案

我们找到了解决方案.由于我们使用的是 SpringBoot 的 RESTFul-Server，因此我们向该服务器添加了'Access-Control-Allow-Origin', '*'"，并且它起作用了..我一直在想，因为它说预检"需要在客户端而不是服务器端解决这个问题.
希望这可以帮助任何人.

We found the solution. As we are using the RESTFul-Server of SpringBoot, to this server we added the "'Access-Control-Allow-Origin', '*'" and it worked.. I was always thinking because it says "preflight" that this need to be solved on the client side and not on the server side.
Hope this helps anybody.

这篇关于angular-cli“localhost:4200"没有访问控制允许来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！