Laravel + Vue/axios Api 调用子域 access-control-allow-origin

Question

我知道有很多关于这类东西的信息。但是我确实对很多事情感到有些困惑。首先。如果我在 api.example.com 上有一个 laravel API，在 www.example.com 上有我的 Vue 项目

所以我从 www.example.com 对 api.example.com 进行 API 调用。那么我应该在哪里处理这个错误呢？我已经将标题添加到我的 Axios 配置中，如下所示：

axios.defaults.headers.common = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": "true"
};

经过一些阅读，我了解到您必须处理此服务器端。所以我尝试安装

composer require barryvdh/laravel-cors

但它给了我这个：

“优化”命令未定义。

所以，也许我的作曲家或图书馆 idk 有问题。但在我浪费另外几个小时之前。我想询问更多有关应用程序要求的信息，甚至可能是如何解决此问题。

Answer 1

您已经在 api 客户端中设置了访问控制，您必须将其放入服务器中，这意味着在 laravel 中。

您的服务器将决定为谁服务。不是您的客户会决定他们应该使用 VueJS 的天气。

在 laravel 中添加 cors 中间件

<?php 

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }
}

你可以走了。