Question

我对VueJS有点陌生，我想从Laravel （护照） 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未经授权错误，我尝试了很多解决方案但没有用，有什么建议吗？< / p>

Answer 1

您需要在标头中发送带有axios请求的令牌，以便后端知道其合法性，您只能在检查后端与邮递员的配合情况之后才能这样做，现在您可以像这样{{1 }}

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

1 个答案: