如何在axios的GET请求中发送JWT令牌？

Question

如何在axios的GET请求中发送JWT令牌？

28

我刚接触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;

在进行GET请求之前，服务器日志中收到的是OPTIONS /profile/me而不是GET /profile/me。

我应该如何解决这个问题？

- Babr

2个回答

3

这对我有效，请尝试这样 -

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

- Praveen Poonia

我遇到了这个错误：

加载http://127.0.0.1:3000/profile/me失败：预检响应中Access-Control-Allow-Headers不允许请求头字段Authorization。

你有什么想法？ - Babr

当我们使用自定义请求头时，会得到一个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");

- Praveen Poonia

我知道。我已经表达了 `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(); });` 但仍然出现错误。有任何想法如何解决它吗？ - Babr

1

如果您正在使用Webpack与Vue应用程序，则可以尝试此方法 - https://github.com/axios/axios/issues/853#issuecomment-374846375，通过配置代理以避免CORS问题来解决该问题。 - Praveen Poonia

抱歉，不确定如何放置那段代码片段。我使用vue.cli创建了应用程序。在/node_modules/@vue/cli-service中有一个webpack.config.js文件，但是当我将以下内容放入其中时，即使在vue服务器重新加载后仍然会收到相同的错误。这里可能出了什么问题？

"devServer":{
  "proxy": {
    "/": {
    "target": 'http://127.0.0.1:3000',
    "pathRewrite": { '^/': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

- Babr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lê Quang Bảo · Accepted Answer

Axios 的 get() 请求接受两个参数。因此，除了 URL 外，您还可以将 JWT 放入其中。

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

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

yourConfig = {
   headers: {
      Authorization: "Bearer " + yourJWTToken
   }
}

你也可以阅读有关在配置中放置什么的内容，此处https://github.com/axios/axios提供了详细信息。只需搜索"请求配置"即可。