Angular 4本地请求遭遇Access-Control-Allow-Origin跨域错误

这是很常见的跨域资源共享（CORS）问题——你的Angular应用跑在http://localhost:4200，而Laravel后端接口在http://api.test/work，浏览器的同源策略会阻止这种跨域请求，因为后端没有返回Access-Control-Allow-Origin响应头。下面给你几种Laravel端的解决方案，按推荐程度排序：

1. 使用官方推荐的CORS包（最稳妥） #

Laravel生态里有成熟的CORS处理包barryvdh/laravel-cors，步骤很简单：

• 先通过Composer安装：

  composer require barryvdh/laravel-cors
  

• 发布配置文件到项目里：

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

• 打开生成的config/cors.php，调整关键配置：
  • 在paths数组里加上你的接口路径'work'，确保这个路径能被CORS中间件处理；
  • 把allowed_origins设为['http://localhost:4200']，只允许你的Angular应用跨域访问（生产环境别用['*']，不安全）；
  • 其他配置比如allowed_methods可以根据需求调整，GET请求的话默认就够。
• 最后在app/Http/Kernel.php里把CORS中间件加入全局中间件栈，这样所有响应都会带上正确的CORS头：

  protected $middleware = [
      // ... 其他已有的中间件
      \Barryvdh\Cors\HandleCors::class,
  ];
  

2. 手动编写CORS中间件（无需第三方包） #

如果你不想引入额外依赖，自己写个中间件也能搞定：

• 生成新的中间件：

  php artisan make:middleware Cors
  

• 打开app/Http/Middleware/Cors.php，修改handle方法，添加必要的响应头：

  public function handle($request, Closure $next)
  {
      $response = $next($request);
  
      // 允许你的Angular应用域名
      $response->header('Access-Control-Allow-Origin', 'http://localhost:4200');
      // 允许的请求方法，这里加上GET就够，按需添加其他方法
      $response->header('Access-Control-Allow-Methods', 'GET, OPTIONS');
      // 允许的请求头
      $response->header('Access-Control-Allow-Headers', 'Content-Type');
  
      return $response;
  }
  

• 注册这个中间件：在app/Http/Kernel.php的$middleware数组里加入\App\Http\Middleware\Cors::class，或者只给/work所在的路由组添加这个中间件。
• 别忘了处理OPTIONS预检请求：浏览器发送实际GET请求前会先发OPTIONS请求，你可以在路由里专门处理：

  Route::options('/work', function () {
      return response()->json([], 200)
          ->header('Access-Control-Allow-Origin', 'http://localhost:4200')
          ->header('Access-Control-Allow-Methods', 'GET')
          ->header('Access-Control-Allow-Headers', 'Content-Type');
  });
  

3. 开发环境临时代理（仅本地测试用） #

如果只是本地开发阶段，也可以用Angular的代理配置绕开CORS：

• 在Angular项目根目录创建proxy.conf.json文件：

  {
    "/work": {
      "target": "http://api.test",
      "secure": false,
      "changeOrigin": true
    }
  }
  

• 修改package.json里的启动命令，加上代理配置：

  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
  }
  

• 之后用npm start启动Angular，你的前端请求/work就会被自动代理到http://api.test/work，浏览器就不会触发CORS限制了。

注意：生产环境绝对不要用代理这种方式，一定要在Laravel后端配置正确的CORS头，严格限制允许的域名，避免安全风险。

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