CORS 策略已阻止从源访问 XMLHttpRequest（Vue.JS 应用程序调用 Lumen 应用程序）

Question

我正在使用 Vue.JS 应用程序，该应用程序正在调用使用 Lumen 构建的 API。每当 Vue.JS 应用程序调用 Lumen API.

时，我总是收到以下错误

下面是Lumen中用于CORS的中间件

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        //Intercepts OPTIONS requests
        if($request->isMethod('OPTIONS')) {
            $response = response('', 200);
        } else {
            // Pass the request to the next middleware
            $response = $next($request);
        }

        // Adds headers to the response
        $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE');
        $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
        $response->header('Access-Control-Allow-Origin', '*');

        // Sends it
        return $response;
    }
}

我在 public 文件夹

的 lumen 的 .htaccess 文件中添加了这个

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

更新 1 ajax 从 chrome 的网络选项卡请求 header:-

我正在使用：

PHP Version: 5.6

Development Environment: Homestead (Apache)

Answer 1

添加

后现在解决了

header('Access-Control-Allow-Headers: *');

而不是

header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

在 CORS 中间件中。

CORS 策略已阻止从源访问 XMLHttpRequest（Vue.JS 应用程序调用 Lumen 应用程序）

Access to XMLHttpRequest from origin has been blocked by CORS policy ( Vue.JS app calling Lumen App )

cors

vue.js

lumen