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

Posted 2023-03-04

【中文标题】Laravel + Vue/axios Api 调用子域 access-control-allow-origin

【英文标题】：Laravel + Vue/axios Api call to subdomain access-control-allow-origin

【发布时间】：2019-02-15 18:18:18

【问题描述】：

我知道有很多关于这类东西的信息。但是我确实对很多事情感到有些困惑。首先。如果我在 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 有问题。但在我浪费另外几个小时之前。我想询问更多有关应用程序要求的信息，甚至可能是如何解决此问题。

【参考方案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');
    

你可以走了。

【讨论】：

创建这个中间件，然后把这个中间件添加到我所有的路由中？

@NielsLucas 添加到您想用作 api 服务的所有路由。

@NielsLucas 会通过测试告诉你。我还没有测试过。对不起