在 Laravel 护照、vueJS 和 Axios 中获得未经授权的 401

Posted 2023-02-22

【中文标题】在 Laravel 护照、vueJS 和 Axios 中获得未经授权的 401

【英文标题】：Getting 401 unauthorized in Laravel passport, vueJS and Axios

【发布时间】：2019-10-22 23:00:15

【问题描述】：

我对 VueJS 有点陌生，我想从 Laravel (passport) API 获取数据，因此我使用 npm i axios 进行 API 请求，这是我的脚本代码来自 App.vue 文件：

import axios from 'axios';
export default 
  data () 
    return 
    
  ,
  created() 
    const postData = 
      grant_type: "password",
      client_id: 2,
      client_secret: 'MvEyvm3MMr0VJ5BlrJyzoKzsjmrVpAXp9FxJHsau',
      username: '[e-mail]',
      password: '********',
      scope: ''
    
    axios.post('http://localhost/api/oauth/token', postData)
    .then(response => 
      console.log(response.data.access_token);
      const header = 
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + response.data.access_token,
      ;
      axios.get('http://localhost/api/api/user', headers: header)
      .then(response => 
        console.log(response)
      )
    )
  

API.PHP （API 的路由文件）：

Route::middleware('auth:api')->get('/user', function (Request $request) 
    return $request->user();
);

这是在 Laravel 中修复 CORS 的中间件代码：

public function handle($request, Closure $next)

    $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);

查看console.log(response.data.access_token)，我正在控制台中登录令牌，但下一个请求给我401未授权错误，我尝试了许多解决方案但没有奏效，有什么建议吗？

【问题讨论】：

http://localhost/api/api/user 应该是 http://localhost/api/user 不是吗？

no http://localhost/api 这是我的项目名称，下一个 api 用于访问 API 路由。

请分享路由配置。

现在检查我已经更新了！

暂时请从 cors 设置中删除域验证..

【参考方案1】：

您需要在标头中发送带有 axios 请求的令牌，以便后端知道其合法性，您只能在检查后端与邮递员一起工作后才能这样做，现在您可以像这样设置 axios 标头axios.defaults.baseURL = '/api'; axios.defaults.headers.common['Authorization'] = "Bearer " + your_token_variable