Vue2使用axios的跨域问题

新建axios.js文件

import axios from 'axios';
​
// 创建 Axios 实例
const instance = axios.create({
    // baseURL: 'http://localhost:9005/', // 设置API前缀
    timeout: 10000,  // 请求超时时间
});
​
// 请求拦截器
instance.interceptors.request.use(
    config => {
        // 可以在这里添加请求头等配置
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
​
// 响应拦截器
instance.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        return Promise.reject(error);
    }
);
​
export default instance;

2.将新建好的JS文件挂载到APP.Vue里面

挂载好后后面就可以使用this.$http来代替axios这样省了每个文件导入axios的力气。

3.配置vue.config.js

注意这个Vue.Config.js必须在和src同级目录下

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9005',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '', // 将 /api 前缀替换为空
        },
      },
    },
  },
};
​

4.使用挂载好的axios进行发送请求

这里由于之前在vue.config.js配置了api开头的会被转化，所以实际上他的请求地址为http://localhost:9005/admin/goods/list

这边有个大坑，之前楼主一直以为这个前端的地址是会被转化为http://localhost:9005/admin/goods/list。但是前端请求地址就是这样的，但是实际的请求地址已经被转化了。