Angular 2中的访问控制允许来源问题

2023-08-01前端开发问题
3

本文介绍了Angular 2中的访问控制允许来源问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我在从我的 node.js 服务器获取数据时遇到问题.

客户端是:

 public getTestLines() : Observable

在服务器端我还设置了标题:

resp.setHeader('Access-Control-Allow-Origin','*')resp.send(JSON.stringify(结果))

但我得到一个错误

<块引用>

XMLHttpRequest 无法加载 http://localhost:3003/get_testlines.对预检请求的响应未通过访问控制检查:否请求中存在Access-Control-Allow-Origin"标头资源.因此,来源 'http://localhost:3000' 是不允许的访问."

我该如何解决?当我删除标题时,它说这个标题是必需的.

解决方案

Access-Control-Allow-Originresponse 标头,而不是请求标头.

您需要让它出现在响应中,而不是请求中.

您已尝试将其放在响应中:

<块引用>

resp.setHeader('Access-Control-Allow-Origin','*')

……但它没有奏效.

这可能是因为你没有把它放在对正确请求的响应中.错误消息说:

<块引用>

预检请求的响应未通过访问控制检查

您已完成某事 以使请求预检.这意味着在浏览器发出您尝试发出的 GET 请求之前,它正在发出 OPTIONS 请求.

这可能是由服务器上的另一段代码处理的,因此 resp.setHeader('Access-Control-Allow-Origin','*') 行不是被击中.

导致发出预检请求的一件事是添加请求标头(除了少数例外).将 Access-Control-Allow-Origin 添加到 request 将触发预检请求,因此尝试解决问题的第一件事是 remove Access-Control-Allow-Origin 来自请求.

如果失败,那么您需要设置您的服务器,以便它可以响应 OPTIONS 请求以及 GET 请求.

I have a problem with getting data from my node.js server.

The client side is:

    public getTestLines() : Observable<TestLine[]> {
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get('http://localhost:3003/get_testlines', options)
                .map((res:Response) => res.json())
                .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
}

in server side I also set the headers:

resp.setHeader('Access-Control-Allow-Origin','*') 
resp.send(JSON.stringify(results))

But I get an error

"XMLHttpRequest cannot load http://localhost:3003/get_testlines. 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:3000' is therefore not allowed access."

How can I fix it? When I remove headers it says that this header is required.

解决方案

Access-Control-Allow-Origin is a response header, not a request header.

You need to have it appear on the response, not the request.

You have attempted to put it on the response:

resp.setHeader('Access-Control-Allow-Origin','*') 

… but it hasn't worked.

This is probably because you haven't put it on the response to the right request. The error message says:

Response to preflight request doesn't pass access control check

You have done something to make the request preflighted. This means that before the browser makes the GET request you are trying to make, it is making an OPTIONS request.

This is, presumably, being handled by a different piece of code on your server so the line resp.setHeader('Access-Control-Allow-Origin','*') isn't being hit.

One thing that causes a preflighted request to be made is the addition of request headers (other than a small number of exceptions). Adding Access-Control-Allow-Origin to the request will trigger a preflighted request, so the first thing to do to try to fix the problem is to remove Access-Control-Allow-Origin from the request.

If that fails, then you need to set up your server so it can respond to the OPTIONS request as well as the GET request.

这篇关于Angular 2中的访问控制允许来源问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

正则表达式([A-Za-z])为啥可以匹配字母加数字或特殊符号?
问题描述: 我需要在我的应用程序中验证一个文本字段。它既不能包含数字,也不能包含特殊字符,所以我尝试了这个正则表达式:/[a-zA-Z]/匹配,问题是,当我在字符串的中间或结尾放入一个数字或特殊字符时,这个正则表达式依然可以匹配通过。 解决办法: 你应...
2024-06-06 前端开发问题
165

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...
2024-04-20 前端开发问题
5

CoffeeScript 总是以匿名函数返回
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)...
2024-04-20 前端开发问题
13