Laravel与Vue.js跨域访问错误求助：多种方案尝试无效

1. 优先使用Laravel官方推荐的CORS包 #

手动加响应头容易被环境覆盖，直接用兼容性更好的第三方包：

• 安装包：composer require fruitcake/laravel-cors
• 发布配置文件：php artisan vendor:publish --tag="cors"
• 编辑config/cors.php，调整核心配置：
  • paths：设为['api/*']（匹配你的API路由前缀）
  • allowed_origins：指定Vue前端域名，比如['https://your-vue-site.com']，生产环境别用*
  • allowed_methods：设为['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
  • allowed_headers：设为['*']
• 在app/Http/Kernel.php的$middleware数组最顶部添加：

  \Fruitcake\Cors\HandleCors::class,
  

  必须放在StartSession中间件之前，避免会话逻辑干扰CORS响应

2. 修正GoDaddy环境的服务器配置 #

GoDaddy共享主机常覆盖自定义.htaccess规则，按以下方式修改：

Apache主机（.htaccess） #

在Laravel根目录的.htaccess中，把CORS规则放在RewriteEngine On之后：

# CORS 响应头配置
Header always set Access-Control-Allow-Origin "https://your-vue-site.com"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"

# 处理OPTIONS预检请求
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

如果cPanel里没启用mod_headers模块，直接联系GoDaddy客服开启。

IIS主机（web.config） #

修改Laravel根目录的web.config：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="https://your-vue-site.com" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization, X-Requested-With" />
    </customHeaders>
  </httpProtocol>
  <rewrite>
    <rules>
      <rule name="Handle OPTIONS Requests" stopProcessing="true">
        <match url=".*" />
        <conditions>
          <add input="{REQUEST_METHOD}" pattern="OPTIONS" />
        </conditions>
        <action type="Response" statusCode="200" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

3. 排查403状态码的额外诱因 #

403不一定全是CORS问题，同步检查：

• Laravel的storage、bootstrap/cache目录权限设为755，文件权限设为644
• 确认API路由都在routes/api.php中，没有误加web中间件（web中间件带CSRF验证，会拦截跨域请求）
• 检查GoDaddy的主机防火墙，是否默认拦截了OPTIONS预检请求（部分共享主机有此限制）

4. 验证配置是否生效 #

用curl命令测试响应头：

curl -H "Origin: https://your-vue-site.com" -I https://your-laravel-site.com/api/test-endpoint

如果响应头里出现Access-Control-Allow-Origin，说明配置生效。

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