Question

我正在尝试学习如何使用安装的Axios和Laravel cors为vue.js应用程序构建基本API。

我可以让api进行大多数调用，例如登录，注册，访问不安全的区域，但是当我尝试访问受保护的区域时，它将在我的浏览器控制台中返回此错误

无法加载http://127.0.0.1:8000/api/closed：对预检的响应请求未通过访问控制检查：否请求中存在“ Access-Control-Allow-Origin”标头资源。因此，不允许原点“ http://localhost:8080” 访问。

这是我的Vue JS功能

userArea () {

  const HTTP = axios.create({
    baseURL: `http://127.0.0.1:8000/api/`,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": true,
      Authorization: 'Bearer ' + this.token
    }
  })

    HTTP.get('closed')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
}

laravel cors.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, PATCH, PUT, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Auth-Token, Authorization, X-Requested-With');

    }
}

编辑：使用邮递员模拟请求可以正常工作 postman example

Answer 1

我找到了解决这个问题的方法

我需要在路线的中间件上添加cors

Route::group(['middleware' => ['jwt.verify','cors']], function() {
    Route::get('user', 'UserController@getAuthenticatedUser');
    Route::get('closed', 'DataController@closed');
});

Laravel + VueJs + Axios，承载令牌不起作用

1 个答案: