如何解决 Laravel + Nuxt.js 中的 CORS 错误

Posted 2023-02-22

【中文标题】如何解决 Laravel + Nuxt.js 中的 CORS 错误

【英文标题】：How to solve the CORS error in Laravel + Nuxt.js

【发布时间】：2021-09-15 09:36:17

【问题描述】：

我正在本地安装由 Nuxt.js（前端）和 Laravel（后端）制作的旧项目。

从源“http://127.0.0.1:3000”访问“http://localhost:8000/api/user”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：当请求的凭据模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

这是我在运行项目时遇到的问题。

请求的前端配置（nuxt nuxt.config.js）。

user: 
    url: '/api/user',
    method: 'get',
    propertyName: false,
    withCredentials: true,
    headers: 
        X-Requested-With': 'XMLHttpRequest',
        Content-Type': 'application/json'
    

后端配置（Laravel config/cors.php）

'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,

我试图通过谷歌搜索找到解决方案，但没有找到正确的解决方案。

withCredetials is true

CORS: credentials mode is 'include'

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

所以，我希望有人在这个领域帮助我。

【参考方案1】：

在你的 laravel 应用中试试这个方法：

php artisan serve --host YOUR_LOCAL_IP

YOUR_LOCAL_IP 是您的 ip，可以在 linux 中使用 ifconfig 命令访问，在 windows 中使用 ipconfig 命令访问。

最后你应该请求YOUR_LOCAL_IP:PORT/api

【讨论】：

我在 Windows 10 上运行它。