How to add headers in Vue.js

Vue.js is a popular front-end framework known for its simple and easy-to-use API and highly composable architecture. When you build a web application, you typically use an HTTP client to interact with the API. The client can be an XMLHttpRequest inside the browser, or it can be an implementation in a JavaScript library like axios. When using these HTTP clients, you may need to add some additional information, such as authentication headers or cross-origin headers, etc. Therefore, this article will introduce how to add headers in Vue.js.

Step One: Import HTTP Client

No matter which HTTP client you are using, the first step is to import it into your Vue.js component. For example, if you use axios, you need to add the following code under the component's <script> tag:

import axios from 'axios'

Here, we import axios library.

Step Two: Add Headers

Once you have imported the HTTP client, you can use it to send GET, POST, PUT, DELETE, etc. requests. Now, let's look at how to add request headers.

axios.get(url, {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})
.then(response => {
  // 处理响应数据
})
.catch(error => {
  // 处理错误
})

Here, we sent a GET request using axios. The second parameter is a configuration item where the headers object specifies an authorization header. Assuming your backend API expects an authorization header of the form Bearer your-token, then you can populate it with the following code:

'Authorization': 'Bearer ' + token

Step 3: Add the header to All requests

If you need to add the same header information in every request, you can use the axios interceptor. This allows you to append headers globally before making the request. Here is an example of adding the Authorization header globally in axios:

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('auth-token')
  config.headers.Authorization = token ? `Bearer ${token}` : ''
  
  return config
})

Here we add the interceptor to the axios instance. We check the auth-token in local storage and set the Authorization header based on its value. If there is no such header, the value is an empty string.

Conclusion

When building a web application using Vue.js, adding header information can easily enhance your application. It improves security and ensures proper authorization of API calls. In this article, we learned how to add header information in a Vue.js application using axios. Using the techniques described in this article, you can easily create a web application that communicates reliably with the backend.

The above is the detailed content of How to add headers in Vue.js. For more information, please follow other related articles on the PHP Chinese website!