Angular 4调用Laravel RESTful API遇跨域Header不允许错误求助

嘿，这个问题我太熟了！你遇到的是典型的**跨域资源共享（CORS）**配置问题——Postman不受浏览器同源策略的限制，所以API测试一切正常，但Angular在浏览器环境下发起请求时，因为Laravel后端没允许Content-Type这个请求头，直接被浏览器拦截了。

下面给你几个靠谱的解决办法，按推荐程度排序：

方法一：自定义Laravel CORS中间件（最推荐，可控性强） #

Laravel本身支持通过中间件统一处理跨域，步骤很简单：

1. 先创建一个CORS中间件：
   打开终端跑这条命令：

   php artisan make:middleware Cors
   

2. 编辑生成的app/Http/Middleware/Cors.php文件，把handle方法改成这样：

   <?php
   
   namespace App\Http\Middleware;
   
   use Closure;
   
   class Cors
   {
       public function handle($request, Closure $next)
       {
           return $next($request)
               // 允许所有域名跨域，生产环境可以改成你的前端域名
               ->header('Access-Control-Allow-Origin', '*')
               // 允许常用的HTTP请求方法
               ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
               // 明确允许Content-Type请求头，还有其他常用的授权头
               ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
       }
   }
   

3. 注册这个中间件：
   打开app/Http/Kernel.php，把这个中间件加到全局中间件数组$middleware里，这样所有请求都会自动处理跨域：

   protected $middleware = [
       // ...这里是其他已有的中间件
       \App\Http\Middleware\Cors::class,
   ];
   

   如果只想给API路由生效，也可以加到$middlewareGroups的api分组里，更精准。

方法二：用现成的Laravel CORS扩展包 #

嫌自己写中间件麻烦的话，可以用成熟的第三方包，比如barryvdh/laravel-cors：

1. 先安装包：

   composer require barryvdh/laravel-cors
   

2. 发布配置文件：

   php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
   

3. 打开config/cors.php，确保allowed_headers里包含Content-Type：

   'allowed_headers' => ['Content-Type', 'Authorization', 'X-Requested-With'],
   

4. 最后在Kernel.php的api中间件组里加上这个包的处理类：

   protected $middlewareGroups = [
       'api' => [
           // ...其他中间件
           \Barryvdh\Cors\HandleCors::class,
       ],
   ];
   

额外检查：Angular的请求头配置 #

顺便确认下你的AuthService里请求头是不是正确设置了，比如：

private headers: Headers = new Headers({
  'Content-Type': 'application/json',
});

发起请求的时候记得带上这个头，比如post请求：

this.http.post(`${this.BASE_URL}/login`, JSON.stringify(user), { headers: this.headers })
  .toPromise()
  // ...后续的then/catch处理

最后别忘了重启Laravel服务器（如果用的是php artisan serve），让配置生效。这样应该就能解决Content-Type不被允许的问题了！

内容的提问来源于stack exchange，提问作者Sam