没有Access-Control-Allow-Origin for angular-cli“localhost:4200”

时间:2017-05-18 11:41:36

标签: angular http angular-cli

我遇到了与CORS和所需标题有关的问题。

设置 我运行一个角度项目和angular-cli(localhost:4200)我想通过HTTP-Request从WebService访问一个JSON。当我在浏览器中直接使用URL时,一切都很好,并显示JSON。一旦我从angular-app发送请求,我就会收到以下错误:

  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有关。因此我附加到头文件header.append('Access-Control-Allow-Origin','*'); 但这没有帮助。

我获得了Chrome的扩展程序CORS并启用了“启用跨源资源共享” ,但它没有帮助。

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

2 个答案:

答案 0 :(得分:1)

我们找到了解决方案。当我们使用SpringBoot的RESTFul-Server时,我们添加了"' Access-Control-Allow-Origin', '*' "它工作.. 我一直在想,因为它说"预检"这需要在客户端解决,而不是在服务器端解决 希望这可以帮助任何人。

答案 1 :(得分:0)

这是服务器端问题。您使用哪种语言服务器? 如果您正在使用JS,则以下块将处理CORS问题。

var app = express()    
var cors = require('cors');
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, 
Content-Type, Accept");
next();
});