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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Laravel护照,vueJS和Axios中未经授权获得401相关的知识,希望对你有一定的参考价值。

我对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: 'my-email@gmail.com',
      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未经授权

错误,我尝试了许多解决方案但没有用,有什么建议吗?
答案
[您需要在标头中发送带有axios请求的令牌,以便后端知道其合法性,只有在您检查后端与邮递员的工作是否正常之后,您才能执行此操作,现在您可以像这样[c0]来设置axios标头>

以上是关于在Laravel护照,vueJS和Axios中未经授权获得401的主要内容,如果未能解决你的问题,请参考以下文章

如何在同一个 laravel 应用程序上通过 laravel 护照安全地使用 axios

带有 Laravel 5.4 后端的 Vuejs 2,发布(未经授权)错误

Laravel 护照(看不懂)

有没有更好的方法来处理 laravel 和 vue js 的 axios 错误

laravel 6护照中未经授权的401错误

用户未经授权时的 Laravel 护照自定义错误消息和状态码