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

21 浏览
0 Comments

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

我在获取来自我的node.js服务器的数据时遇到了问题。\n客户端代码如下：\n

    public getTestLines() : Observable {
    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')); 
}

\n服务器端我也设置了headers：\n

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

\n但是我遇到了一个错误：\n

\n\"XMLHttpRequest无法加载http://localhost:3003/get_testlines。\n 对预检请求的响应未通过访问控制检查：请求的资源上不存在\'Access-Control-Allow-Origin\'头。\n 因此，不允许来自\'http://localhost:3000\'的访问。\"\n

\n我该如何解决这个问题？当我移除headers时，它说这个头是必需的。

0

3 答案

0 Comments

在Angular 2中出现了Access Control Allow Origin问题，这个问题的原因可能是请求中设置了Access-Control-Allow-Origin，但实际上在请求中不需要设置这个头部信息。应该确认一下响应中是否包含这个头部信息（可以在开发者控制台中进行检查）。如果能够分享更多的后端代码，那将会更有帮助。

解决这个问题的方法是确保后端返回的响应中包含Access-Control-Allow-Origin头部信息。可以在后端代码中添加以下代码来设置这个头部信息：

response.setHeader("Access-Control-Allow-Origin", "*");

这行代码将会允许所有域名的请求访问该资源。如果你只想允许特定的域名访问该资源，可以将*替换为特定的域名。

另外，还可以通过在后端代码中添加以下代码来设置响应中的其他相关头部信息：

response.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");

response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

这些代码将允许使用这些方法进行请求，并且允许在请求中使用的头部信息。

请注意，这些解决方法是基于使用Java的后端代码的情况，如果你使用的是其他后端语言，可能会有所不同。

0
0 Comments

在Angular 2中出现Access Control Allow Origin问题的原因是，Access-Control-Allow-Origin是一个响应头，而不是请求头。因此，需要在后端修复权限问题。可以创建一个cors.js文件，其中包含所有必要的权限设置。

cors.js文件内容如下：

function crosPermission(){
  this.permission=function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');
    res.header('Access-Control-Allow-Headers','Content-Type');
    res.header('Access-Control-Allow-Methods','GET','POST','PUT','DELETE','OPTIONS');
    next();
  }
}
module.exports= new crosPermission();

下一步是在app.js中添加一些代码：

var cors=require('./cors');
app.use(cors.permission)

以上是解决Angular 2中Access Control Allow Origin问题的步骤。

0
0 Comments

在Angular 2中出现的(Access Control Allow Origin issue)问题的原因是：

Access-Control-Allow-Origin是一个响应头，而不是一个请求头。需要将其出现在响应中，而不是请求中。尽管你尝试将其放在响应中，但却没有起作用。这可能是因为你没有将其放在正确的请求的响应中。错误信息显示：

响应到预检请求不通过访问控制检查

你已经做了一些事情来使请求进行预检。这意味着在浏览器发送你尝试进行的GET请求之前，它会发送一个OPTIONS请求。这个请求可能由服务器上的不同代码处理，因此resp.setHeader('Access-Control-Allow-Origin','*')这行代码没有被执行到。

触发预检请求的一个原因是添加请求头（除了一些特殊情况）。将Access-Control-Allow-Origin添加到请求中将会触发预检请求，因此尝试解决问题的第一步是从请求中删除Access-Control-Allow-Origin。

如果这样做失败了，那么你需要设置你的服务器，使其能够响应OPTIONS请求和GET请求。

0