React fetch请求Laravel 8本地接口触发CORS错误如何解决

触发CORS错误的核心原因是浏览器同源策略的强制校验：

• 你的React前端运行在http://localhost:3000，Laravel接口运行在Web服务默认的80端口（地址前缀是http://localhost/project/public），两者端口不一致，不满足“协议+域名+端口三者完全相同”的同源要求。
• 浏览器中只有前端脚本发起的异步HTTP请求（比如fetch、axios调用）会受CORS规则限制，你直接在浏览器地址栏访问接口属于直接加载文档资源，不受该规则约束，所以可以正常返回结果。
• 当跨域请求发起时，浏览器会自动校验接口返回的CORS响应头，如果没有匹配的允许跨域配置，会直接拦截响应内容，抛出TypeError: Failed to fetch错误。

以下三种方案任选其一即可，按推荐优先级排序：

方案1：Laravel端配置CORS响应头（规范方案，开发/生产环境通用） #

Laravel 8版本默认集成了CORS处理依赖，不需要额外安装包：

1. 先确认项目存在config/cors.php配置文件，如果不存在执行以下命令生成：

   php artisan vendor:publish --provider="Fruitcake\Cors\CorsServiceProvider"
   

2. 修改config/cors.php配置项，放开本地前端的跨域访问权限：

   // 匹配需要应用CORS规则的接口路径
   'paths' => ['v1/*', 'api/*'],
   // 允许本地React前端地址跨域访问
   'allowed_origins' => ['http://localhost:3000'],
   // 本地开发可放开所有请求方法、请求头限制
   'allowed_methods' => ['*'],
   'allowed_headers' => ['*'],
   'supports_credentials' => false,
   

3. 打开app/Http/Kernel.php，确认\Fruitcake\Cors\HandleCors::class中间件已经加入全局中间件组，或者对应接口路由所属的中间件组。
4. 执行配置清除命令生效：

   php artisan config:clear
   

方案2：React开发服务配置代理（零后端改动，本地开发专用） #

不需要修改Laravel端任何配置，通过React开发服务的转发能力绕过跨域限制：

1. 如果项目未安装代理依赖，先在React项目目录执行安装：

   npm install http-proxy-middleware --save-dev
   

2. 在React项目src目录下新建setupProxy.js文件，写入代理规则：

   const { createProxyMiddleware } = require('http-proxy-middleware');
   
   module.exports = function(app) {
     app.use(
       '/v1',
       createProxyMiddleware({
         target: 'http://localhost/project/public',
         changeOrigin: true,
       })
     );
   };
   

3. 修改前端fetch请求的地址为相对路径，去掉域名前缀：

   // 原写法：let url = "http://localhost/project/public/v1/checkIdentifier/" + identifierUrl;
   let url = "/v1/checkIdentifier/" + identifierUrl;
   

4. 重启React开发服务即可生效，此时接口请求会被前端开发服务自动转发到Laravel端，浏览器侧判定为同域请求，不会触发CORS校验。

方案3：浏览器临时关闭CORS校验（仅临时调试用） #

可以通过启动参数关闭浏览器的同源策略校验，适合快速验证接口逻辑，不建议作为长期开发方案：

• 以Chrome为例，新建一个空目录作为独立用户数据目录，在终端执行以下命令启动浏览器：

  chrome.exe --disable-web-security --user-data-dir="你新建的空目录绝对路径"
  

  启动后的浏览器会完全关闭CORS校验，所有跨域请求都可以正常响应，注意不要用这个模式日常浏览网页避免安全风险。

额外提示：当前控制器中异常场景也返回200状态码不影响CORS校验，但不符合HTTP接口规范，建议后续根据错误类型返回对应4xx/5xx状态码。现有查询逻辑使用Laravel查询构造器做了参数绑定，不存在SQL注入风险。

内容的提问来源于stack exchange，提问作者Carol.Kar