Vue.js CORS 错误：如何配置 Laravel API 来解决？

2024-03-21 17:31:28

解决 Vue.js CORS 错误：配置 Laravel API

引言

跨域资源共享 (CORS) 错误在使用不同源的 Web 应用程序进行通信时很常见。在本文中，我们将探讨在 Vue.js 应用向 Laravel API 发送登录请求时遇到的 CORS 错误，并逐步指导您解决此问题。

了解 CORS 错误

CORS 是一种浏览器机制，用于限制不同源的脚本访问响应。当 Vue.js 应用尝试从与 API 托管域名不同的域名访问 Laravel API 时，就会出现此错误。在这种情况下，响应头中会缺少“Access-Control-Allow-Origin”字段，导致浏览器阻止脚本访问响应主体。

解决方案

要解决 CORS 错误，需要在 Laravel API 中配置 CORS 允许策略。这将允许 Vue.js 应用从指定域名访问 API。

步骤 1：安装 Laravel CORS 库

首先，使用 Composer 安装 Laravel CORS 库：

composer require barryvdh/laravel-cors

步骤 2：配置 CORS 允许策略

在 config/cors.php 配置文件中，配置 CORS 允许策略，允许 Vue.js 应用从特定域名访问 API：

return [
    'paths' => ['api/*'],
    'allowed_origins' => ['http://localhost:8080'],
    'allowed_methods' => ['*'],
    'allowed_headers' => ['*'],
];

步骤 3：注册 CORS 中间件

在 app/Http/Kernel.php 文件中，注册 CORS 中间件：

protected $middlewareGroups = [
    'web' => [
        \Barryvdh\Cors\HandleCors::class,
    ],
    'api' => [
        \Barryvdh\Cors\HandleCors::class,
    ],
];

步骤 4：重试登录请求

配置 CORS 允许策略并注册中间件后，刷新 Vue.js 应用并重试登录请求。此时，响应应该不再出现 CORS 错误。

提示