预检响应 vue-laravel App 中的 Access-Control-Allow-Methods 不允许方法 PUT答案

【问题标题】：Method PUT is not allowed by Access-Control-Allow-Methods in preflight response vue-laravel App预检响应 vue-laravel App 中的 Access-Control-Allow-Methods 不允许方法 PUT
【发布时间】：2018-10-31 22:12:33
【问题描述】：

我是 vue 新手。对于 ajax 请求，我使用 axios，对于后端，我使用 Laravel。每当我发送 POST 和 GET 请求时，它都可以正常工作。但是，在尝试发送 PUT 请求时，预检响应 vue-laravel 应用程序中的 Access-Control-Allow-Methods 不允许其显示方法 PUT。我在 Stackoverflow 和 github 中阅读了很多答案，但没有一个对我有用。

这是客户端代码：

axios.put('http://127.0.0.1:8000/api/photo/6', this.photo, { headers: getHeader() })
    .then(response => {
        console.log(response.data.message);
   }).catch(err => {
        this.errors = err.response.data.errors;
   });

这里是 CROSS 中间件代码：

//allowed client 
    //now only for localhost vue cli
    $domains = ['http://localhost:8080'];

    if(isset($request->server()['HTTP_ORIGIN'])){

        $origin = $request->server()['HTTP_ORIGIN'];

        if(in_array($origin, $domains)){
            header('Access-Control-Allow-Origin: '.$origin);
            header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization');
        }
    }

    return $next($request);

【问题讨论】：

这是您的服务器配置造成的
仔细看看你的错误，它提到了Access-Control-Allow-Methods，现在看看你的服务器代码，你错过了发送这个标题的一行
我还将这一行添加到我的 CROS 中间件标头中（'Access-Control-Allow-Methods: ', ''POST, GET, PUT, DELETE, OPTIONS''）;结果还是一样

标签： laravel vue.js axios

【解决方案1】：

特定的 GET、HEAD 和 POST HTTP 请求不会触发 CORS 预检 OPTIONS 检查。它们被称为简单请求。它们只发送一部分 HTTP 标头。任何其他附加标头，例如 Authorization 标头（想想 JWT 身份验证），都会触发预检 OPTIONS 请求。详情请见https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

我认为最简单的方法是在后端使用 laravel-cors 包（参见 https://github.com/barryvdh/laravel-cors）。

在进行开发时，您可以通过将 allowedOrigins、allowedHeaders 和 allowedMethods 设置为 *.稍后，在测试和随后的生产过程中，您应该将其调整为更严格。到那时，您将更好地掌握 CORS 概念，然后您可以根据需要对其进行完全配置。

【讨论】：

【解决方案2】：

在后端试试这个： app/Http/Middleware/Cors.php

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

app/Http/Kernel.php $routedMiddleware 数组添加

'cors' => \App\Http\Middleware\Cors::class,

路由/api.php Route::group(['middleware' => 'cors'], function () {

Route::put('/v1/employees', 'Employees@store');

});

【讨论】：