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/.

仅供参考,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.