在localhost开发Angular SPA调用远程Laravel API的XSRF跨域问题求助

以下是几种便捷的解决方案，按推荐优先级排序：

1. 使用Angular代理配置（最推荐） #

Angular自带的代理功能可以让本地请求转发到远程API，浏览器会认为请求是同域的，自动处理Cookie和XSRF-TOKEN头。

• 在项目根目录创建proxy.conf.json文件，内容如下：

{
  "/api/*": {
    "target": "https://my-api.myhost.com",
    "secure": true,
    "changeOrigin": true,
    "withCredentials": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

（注：如果Laravel API本身带/api路由前缀，可移除pathRewrite节点，根据实际路由结构调整）

• 修改angular.json中的serve配置，指定代理文件：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build",
    "proxyConfig": "proxy.conf.json"
  }
}

• 重启Angular开发服务器，之后所有以/api开头的请求都会被转发到远程API，浏览器会自动携带Cookie并设置X-XSRF-TOKEN请求头。

2. 调整Laravel后端的CORS与XSRF设置（需后端配合） #

如果无法使用代理，可修改Laravel配置允许本地跨域请求：

• 编辑config/cors.php：

  • paths设为允许的API路径，比如['api/*']
  • allowed_origins添加你的Angular开发地址：['http://localhost:4200']
  • supports_credentials设为true，确保Cookie能跨域携带
  • allowed_headers和exposed_headers都加入X-XSRF-TOKEN

• 编辑app/Http/Middleware/VerifyCsrfToken.php，开发环境临时放宽验证：

public function handle($request, Closure $next)
{
    if (app()->environment('local')) {
        return $next($request);
    }
    return parent::handle($request, $next);
}

（注意：上线前必须移除这段代码，恢复正常CSRF验证）

• 可选：修改config/session.php中的domain为.myhost.com，让Cookie能在同顶级域名的子节点间共享。

3. 本地Hosts映射+同域名访问 #

通过修改hosts文件，把localhost映射到同顶级域名的子节点：

• 编辑hosts文件：

  • Windows：C:\Windows\System32\drivers\etc\hosts
  • macOS/Linux：/etc/hosts
    添加一行：127.0.0.1 dev.myhost.com

• 启动Angular时绑定该域名：

ng serve --host dev.myhost.com --port 4200 --disable-host-check

（--disable-host-check用于绕过Angular的主机验证）

此时Angular应用运行在dev.myhost.com:4200，和API的my-api.myhost.com同顶级域名，Cookie可正常共享，XSRF-TOKEN头也能自动设置。

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