React+Laravel中strict-origin-when-cross-origin与Axios网络错误求助

核心问题说明 #

net::ERR_CONNECTION_REFUSED本质是无法连接到目标服务器，并非单纯的CORS跨域问题（CORS错误会明确提示跨域相关信息），所以优先从服务器可达性入手排查。

具体排查解决步骤 #

• 确认Laravel服务状态

  • 检查启动Laravel的终端窗口，确认php artisan serve命令正在运行且端口为8000。若服务未启动，执行php artisan serve启动；若端口被占用，用php artisan serve --port=8001更换端口，同时修改React中的请求URL对应端口。
  • 直接在浏览器访问http://localhost:8000/api/signup（GET请求），如果浏览器也无法打开该地址，说明Laravel服务未正常启动或端口配置错误。

• 校验React请求配置

  • 核对Axios的请求URL是否正确，比如是否多写/漏写斜杠，可尝试将localhost替换为127.0.0.1（部分环境下两者存在访问差异），请求地址改为http://127.0.0.1:8000/api/signup。
  • 若使用了React代理，确认package.json中的proxy配置是否正确，示例："proxy": "http://localhost:8000"，此时请求应简写为/api/signup（无需带完整域名），注意代理仅在开发环境生效。

• 检查Laravel CORS配置

  • 打开Laravel项目的config/cors.php文件，确认配置项：
    • paths包含api/*
    • allowed_origins设为['*']（开发环境临时放开，生产环境再限制具体域名）
    • allowed_methods和allowed_headers均设为['*']
  • 检查app/Http/Kernel.php的api中间件组中，是否包含\Fruitcake\Cors\HandleCors::class中间件，确保CORS中间件已启用。

• 排查本地环境与网络

  • 临时关闭电脑防火墙，测试是否能正常连接（部分防火墙会拦截本地端口访问）。
  • 若使用WSL、虚拟机等环境运行Laravel，需确认端口映射是否正确，此时React请求应使用虚拟机/WSL的IP地址而非localhost（可在WSL中执行ifconfig查看eth0的inet地址）。

• 清除缓存并重启服务

  • 在Laravel项目中执行：

    php artisan config:clear
    php artisan cache:clear
    

    然后重启Laravel服务。
  • 重启React开发服务器，同时按Ctrl+Shift+R硬刷新浏览器清除缓存。

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