vue使用CORS的问题

Question

我们正在一个项目上使用 vue-bulma-admin 脚手架，它已经使用了 webpack，我们似乎无法对我们的 API 执行任何 POST/PUT 请求（已经设置access-cross-allow-origin headers 到 *), 只有 GET 请求有效。从消耗我们 API 的不同 front-ends，我们没有这个问题，只有这个特定的 front-end，它给出了这个常见错误：

"No 'Access-Control-Allow-Origin' header is present on the requested resource."

Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource.

我们已经尝试在 axios/vue-resource 上设置自定义 headers，但没有成功。正如我所说，通过 Postman / different front-ends 或使用 CORS chrome 扩展使用相同的路由，一切正常。

有解决此问题的想法吗？

我的中间件 Cors 在 Laravel API.

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
          ->header('Access-Control-Allow-Origin', '*')
          ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }
}

Answer 1

我使用软件包 https://github.com/barryvdh/laravel-cors

解决了我的问题

vue使用CORS的问题

Problems with CORS using vue

cors

laravel

vue.js

axios