Laravel 和 Vue Js 应用程序中的脚本无法使用响应正文（原因：CORS 缺少允许来源）

Question

开发 Laravel 10 + Vue Js 3 应用程序两个项目文件是分开的。我也有以下 api.php 登录路线

Route::post('/login', [LoginController::class, 'submit']);

并在 vue.js 中使用以下登录

const handleLogin = () => {
    axios.post('http://localhost/api/login', getFormattedCredentials())
        .then((response) => {
            console.log(response.data)
            waitingOnVerification.value = true
        })
        .catch((error) => {
            console.error(error)
            alert(error.response.data.message)
        })
}

但是当我尝试在 vue 前端使用登录时，检查控制台遇到以下错误消息作为响应

OPTIONS http://localhost/api/login

Response body is not available to scripts (Reason: CORS Missing Allow Origin)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/api/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.

如何解决这个问题？

Answer 1

您遇到的错误与CORS政策有关。 就您而言，您似乎尚未在 Laravel 项目中配置此策略。

在 Laravel 中，您可以通过转到

config\cors.php

文件来配置 CORS 策略。

这个文件应该看起来像这样（您可以根据需要自定义它）：

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,