Angular2标头

Question

当我调用没有头的服务器时，它的工作和服务器返回json：

this.http.get(url)

但是当我添加标题时：

var headers = new Headers({'x-id': '1'});
this.http.get(url, {'headers': headers})

浏览器返回错误：

XMLHttpRequest cannot load http://domain/api/v1/. 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.

我也试过添加Origin标题 - 浏览器错误： Refused to set unsafe header "Origin"

和Access-Control-Allow-Origin标头 - 没有效果

---

在服务器（Laravel）上我创建了中间件Cors.php ：

<?php

namespace App\Http\Middleware;

use Closure;

class Cors {
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', 'http://localhost:3000')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'x-id');
    }
}

---

我是angular2和CORS请求的新手，不知道该怎么做。

• Angular：2.0.0-beta.0
• Laravel：5.0
• 浏览器：谷歌浏览器

Answer 1

使用CORS的预检请求意味着OPTIONS HTTP请求在实际请求之前执行。 您从一个简单的请求切换到一个请求，因为您在GET方法的情况下添加自定义标头。 此链接可以帮助您了解会发生什么： http ： //restlet.com/blog/2015/12/15/understanding-and-using-cors/ 。

FYI在执行跨域请求时，浏览器会自动添加Origin标头。

我认为您的问题在Access-Control-Allow-Origin标头内。 您必须设置发出呼叫的主机，而不是服务器的地址。 你应该有这个（如果你的Angular2应用程序在localhost:8080上运行）：

return $next($request)
        ->header('Access-Control-Allow-Origin', 'http://localhost:8080')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'x-id');

希望它对你有帮助，蒂埃里

Answer 2

我在Angular2应用程序中遇到了同样的问题。 如前所述，问题是在客户端发出每个请求之前，将预检请求发送到服务器。

这种请求具有OPTIONS类型，服务器有责任发回状态为200的预检响应 ，并设置标头以接受来自该客户端的请求。

这是我的解决方案（快递）：

// Domain you wish to allow
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'YOUR-CUSTOM-HEADERS-HERE');

// Set to true if you need the website to include cookies in  requests
res.setHeader('Access-Control-Allow-Credentials', true);

// Check if Preflight Request
if (req.method === 'OPTIONS') {
    res.status(200);
        res.end();
}
else {
    // Pass to next layer of middleware
    next();
}

通过这种方式，客户端将获得授权，您将能够在所有请求中设置自定义标头。 在您的情况下，您必须在Access-Control-Allow-Headers选项中设置x-id 。

Answer 3

在您的情况下，服务器必须使用以下标头响应预检请求：

Access-Control-Allow-Origin： *

X-Custom-HeaderAccess-Control-Allow-Methods： GET，POST，PUT，DELETE

Access-Control-Allow-Headers ：x-id

请注意，对于Access-Control-Allow-Origin HTTP标头，最佳做法是设置明确托管angular2应用程序的域而不是*，这对于不控制所有使用者的公共API是必需的！

我强烈建议您阅读以下有关CORS的文章：

http://www.html5rocks.com/en/tutorials/cors/

Answer 4

我一直在开发一个带有c# web api后端的angular2应用程序，并且遇到了cors设置的问题。

真正的问题原来不是cors设置，而是发送到api的数据（js日期对象到c＃datetime类型没有正确排列）。 但是，在您的情况下，是否必须在标头中传递x-id而不是作为请求的参数？ 例如，你可以做这样的事情：

getYourDataType(id: number): Observable<YourDataType> {
    return this.http.get(url + '/' + id.toString())
        .map((response: Response) => <YourDataType>response.json());

从处理这个问题后的研究来看，似乎angular会试图找到你想要击中的端点，找不到它，然后假设原因必须是cors设置的错误，而不是客户端数据。

你说当你没有在你的请求上设置任何标题时api返回数据，所以如果从标题更改为参数不起作用，你可以尝试使用像fiddler或chrome的网络选项卡这样的工具检查请求开发工具，看看角度是否按照您的预期应该构建每个请求。 或者通过在fiddler中手动构建请求来比较结果，可能会非常有启发性地说明为了给出这个意外响应而发生了什么。

无论如何，确定您的数据存在问题，而不是使用cors设置是非常困难的。 Angular让你看到一个完全错误的东西，试图找出一个非常简单的问题。 我希望这有助于某人。

Answer 5

问题是您还需要设置允许的标头。 这就是为什么它不起作用。 要使其与简单的angular2 http请求一起使用，您需要添加以下标头：

    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); // In your case also add x-id or what you are also using. 
    header('Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS');

Answer 6

尝试以下代码，这应该工作

let headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/json');
headers.append('x-id','1');
this.http.get(url, {'headers': headers}).subscribe(
  response => {...},
  error => {...}
);