vue2跨域（最简单的模式）

安装axios

npm install axios --save

创建axios文件夹

在src文件夹下创建

• axios文件夹以及
• index.js文件（对axios进行二次封装）、
• apiConfig文件（主要用来存放后台接口的地址，可以分为研发地址、测试地址、生产地址，易于区分）
  

index.js

import axios from "axios"; 
// 方式一：对应下方方式一
// axios.defaults.baseURL = "/api";
// export default axios;
// 方式二：对应下方方式二
const Axios = axios.create({
  baseURL: "/api",
});
export default Axios;

apiConfig.js

import request from "./index";
export function method1() {
  return request({
    url: "/demo/getMethod1",
    method: "get",
  });
}

main.js引入axios

// 方式一：对应上方方式一
// import axios from "@/axios";
// Vue.prototype.axios = axios;
// 方式二：对应上方方式二
import Axios from "@/axios";
Vue.prototype.axios = Axios;

创建与src同级的vue.config.js文件

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://x.x.x.x:x",
        pathRewrite: { "^/api": "" },
        changeOrigin: true,
      },
    },
  },
};

注意

配置文件修改之后都需要重启
后台也需要启动，否则会报错：

Proxy error: Could not proxy request /demo/getPersonNews from localhost:8288 to http://192.168.8.127:9000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ETIMEDOUT).