使用 JWT 访问 Rest API 适用于 Postman 但不适用于 Axios

Posted 2023-03-10

【中文标题】使用 JWT 访问 Rest API 适用于 Postman 但不适用于 Axios

【英文标题】：Access to Rest API using JWT works with Postman but does not work with Axios

【发布时间】：2020-07-21 08:50:50

【问题描述】：

我有一个使用 Laravel 制作的 Api rest，并受 JWT 保护。登录正常工作，但是，当使用登录返回的承载令牌时，我收到错误：

CORS 策略已阻止从源“http://api-laravel3.test/api/movies”访问“http://api-laravel3.test/api/movies”处的 XMLHttpRequest：8080 已被 CORS 策略阻止：对预检请求的响应不通过访问控制检查：它没有 HTTP ok 状态。

通过 Bearer Token 的 Postman 访问工作正常。问题出现在axios

     var token = localStorage.getItem('user-token');

      axios.get('http://api-laravel3.test/api/movies',  
        headers:
          'Content-Type': 'application/json',
          'Authorization': 'Bearer '+token,
        
      ).then(function (response) 
        console.log('OK ' + response.status);
        return response.data
      )
      .catch(function (error) 
          console.log('Error: ' + error.response );
          //return Promise.reject(error);
      );

【参考方案1】：

我相信，您可以通过在 /public/index.php 中添加这些行来解决您的问题。但如果你介意的话，它并不优雅。

header('Access-Control-Allow-Origin: *');  
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header("Access-Control-Max-Age", "3600");
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
header("Access-Control-Allow-Credentials", "true");

为了获得更好的解决方案，您可以为您的 Laravel 应用程序创建一个新的中间件。 您应该查看此答案以了解更多信息：https://***.com/a/44683779/4448438

【讨论】：

感谢您的回答。我按你说的改了，但错误还在继续

你能把这个 'Access-Control-Allow-Origin': '*' 添加到你的 axios 标头吗？

我试过了，但也没有用。有一些允许正确发送的邮递员配置。但我不知道它是什么

关于这个问题的任何更新，我也面临同样的问题。在我的情况下，从 axios 命中 Spring Boot API 的“GET”方法，并传递 API 接受的 Authorization Header。