逐步教你使用Vue前端代理实现跨域请求

目录结构

---

1⃣️在build文件夹下的webpack.dev.config下

2⃣️找到devServer下的proxy进行配置，target下为跨域的url。

代码如下：

proxy: {
      '/api': {
        target: 'http://xx.xxx.xxx.x:xxx',
        changeOrigin: true
      },
    },

---

1⃣️在config文件夹下的index.js

2⃣️找到dev下的proxyTable进行配置

代码如下：

   proxyTable: {
      "/api/*": {
        target: "http://xx.xxx.xxx.x:xxx",
        changeOrigin: true
      }
    },

---

1⃣️npm install axios --save-dev
2⃣️在src下创建文件夹api
3⃣️在api下创建文件request.js

代码如下：

import axios from "axios";

export function request(config) {
  const instance = axios.create({
    baseURL: "" 
    timeout: 5000
  });

  instance.interceptors.request.use(
    config => {
      return config;
    },
    error => {
      console.log(error);
    }
  );

  instance.interceptors.response.use(
    res => {
      return res.data;
    },
    error => {
      console.log(error);
    }
  );
  return instance(config);
}

4⃣️同一级下创建文件start.js

代码如下：

export function getTrainType() {
  return request({
    url: "/api/demo",
    method: "GET",
  });
}

---