我应该如何在 axios GET 请求中发送 JWT 令牌？ [复制]

Posted 2023-02-22

【中文标题】我应该如何在 axios GET 请求中发送 JWT 令牌？ [复制]

【英文标题】：How should I send JWT token in axios GET request? [duplicate]

【发布时间】：2019-02-16 22:24:17

【问题描述】：

我是 Vue.js 新手，想在组件中向受限 api 发出请求：

  computed: 
    token () 
      return this.$store.getters.getToken; 
    ,
   ...

created () 
         axios
        .get( this.BASE_URL + '/profile/me')
        .then( res => 
                    this.profile = res.data;
                    console.log('profile is:', res.data);

          )
          .catch(error => console.log(error))            
    ,

问题是我不知道如何将令牌包含到请求标头中。所以毫不奇怪，我得到401 错误响应。

当我尝试时

axios.defaults.headers.common['Authorization'] = this.token;

在获取请求之前，我在服务器日志中收到OPTIONS /profile/me 而不是GET /profile/me。

我该如何解决？

【参考方案1】：

axios get() 请求接受两个参数。所以，除了url，你也可以把JWT放进去。

axios.get(yourURL, yourConfig)
.then(...)

在您的情况下，yourConfig 可能是这样的

yourConfig = 
   headers: 
      Authorization: "Bearer " + yourJWTToken
   

您还可以在https://github.com/axios/axios 阅读有关可以在配置中添加的内容。 只需搜索“请求配置”

【讨论】：

我在服务日志中得到OPTIONS /profile/me 200。并且没有 GET 请求。浏览器还抱怨“不允许授权”，尽管事实上我有这个：app.use(function(req, res, next) res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Credentials", "true"); res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); ... in express settings。

您可以通过在本地计算机上安装此扩展来伪造域，而不是更改服务器行为。(chrome.google.com/webstore/detail/allow-control-allow-origi/…)。将您的服务器配置为接受来自不同域的请求会导致某种 CSRF 攻击。另外，请记住在开发后关闭该扩展。

【参考方案2】：

这对我有用，试试看 -

let JWTToken = 'xxyyzz';
 axios
    .get(this.BASE_URL + '/profile/me',  headers: "Authorization" : `Bearer $JWTToken` )
    .then(res => 
       this.profile = res.data;
       console.log('profile is:', res.data);
      )
      .catch(error => console.log(error)) 

【讨论】：

我收到此错误：Failed to load http://127.0.0.1:3000/profile/me: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.。有什么想法吗？

当我们使用自定义请求标头时，我们将获得 CORS 预检。我们需要使用适当的 CORS 标头回复该 CORS 预检以使其正常工作。比如 - ` res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Credentials", "true"); res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); `

我知道。我已经表达了app.use(function(req, res, next) res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Credentials", "true"); res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); res.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); next(); );，但仍然收到错误消息。任何想法如何解决它？

如果你使用 webpack 和 vue 应用程序，那么试试这个 - github.com/axios/axios/issues/853#issuecomment-374846375 它将通过配置代理来解决问题，以避免 CORS

抱歉，不知道怎么写。 sn-p。我已经使用 vue.cli 创建了该应用程序。在/node_modules/@vue/cli-service 中有一个webpack.config.js，但是当我把"devServer": "proxy": "/": "target": 'http://127.0.0.1:3000', "pathRewrite": '^/': '' , "changeOrigin": true, "secure": false 放在那里时，在vue 服务器重新加载后仍然会出现同样的错误。这里有什么问题？