laravel - Angular2 标题

Question

当我在没有 header 的情况下调用服务器时，它的工作正常并且服务器返回 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 header - 浏览器错误:Refused to set unsafe header "Origin"

和 Access-Control-Allow-Origin header - 无效

---

在服务器 (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 方法的情况下添加了自定义 header 。此链接可以帮助您了解发生了什么:http://restlet.com/blog/2015/12/15/understanding-and-using-cors/ .

仅供引用，Origin header 在执行跨域请求时由浏览器自动添加。

我认为您的问题出在 Access-Control-Allow-Origin header 中。您必须设置发出调用的主机而不是服务器的地址。你应该改用这个(如果你的 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');

希望对你有帮助，蒂埃里