Vue中axios跨域与拦截器详解

在 Vue 开发环境中，使用 axios 进行网络请求时，可能会遇到跨域问题，这主要是由于浏览器的安全策略，即同源策略限制了不同源之间的通信。本文将详细介绍如何在 Vue 项目中解决跨域问题以及如何利用 axios 的拦截器功能。 首先，关于 Vue 中 axios 的引入和使用，虽然 Vue CLI 不推荐使用 `vue.use()` 方法来全局注册 axios，但可以通过以下两种方法来实现： 1. 将 axios 设置为 Vue 原型链属性: 在项目的 `main.js` 或相关入口文件中，导入 axios，然后将其挂载到 Vue 实例的原型上，这样在组件中可以直接通过 `this.axios` 访问： ```javascript import axios from 'axios'; Vue.prototype.axios = axios; ``` 使用时，例如发送一个 POST 请求： ```javascript components: { methods: { fetchData() { this.axios({ url: 'a.xxx', method: 'post', data: { id: 3, name: 'jack' } }) .then(response => { console.log(response); }) .catch(error => { console.log(error); }); } } } ``` 需要注意的是，由于 Vue 的数据绑定规则，直接在 axios 中的 `data` 对象上操作是无效的。可以通过箭头函数来避免这个问题。 2. 处理本地开发环境的跨域问题（Webpack proxyTable）: 当在本地开发环境下访问后端接口时，如果需要跨域，可以在 webpack 的配置文件 `config/index.js` 的 `dev` 配置中的 `proxyTable` 中进行设置。例如，对于目标接口 `http://10.1.5.11:8080/xxx/duty`，配置如下： ```javascript dev: { proxyTable: { '/api': { target: 'http://10.1.5.11:8080', // 设置目标服务器地址和端口 changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': '/' }, // 将所有以 '/api' 开头的路径重写为实际请求的路径 }, }, } ``` 这样，当你在 Vue 组件中使用 `/api/xxx/duty` 时，实际上会被代理到 `http://10.1.5.11:8080/xxx/duty`，从而解决跨域问题。 同时，axios 提供了拦截器（interceptors）的功能，可以在发送请求和接收响应前后执行自定义操作。例如，可以设置一个全局的错误拦截器，用于统一处理所有请求的错误，或者在请求前添加身份验证令牌： ```javascript axios.interceptors.request.use( config => { // 在发送请求之前做些什么，如添加token等 if (localStorage.token) { config.headers.Authorization = 'Bearer ' + localStorage.token; } return config; }, error => { // 对请求错误做些什么，如显示错误信息 return Promise.reject(error); } ); axios.interceptors.response.use( response => { // 对响应数据做处理 return response.data; }, error => { // 对请求错误做处理 if (error.response.status === 401) { // 处理未授权的情况 // ... } throw error; } ); ``` 总结来说，Vue 中使用 axios 解决跨域问题主要是通过配置 proxyTable 来实现本地代理，而在全局或特定请求中使用拦截器进行定制化操作。了解并灵活运用这些技巧能有效提升 Vue 项目与后端接口的交互效率。