【Vue】vue.config.js 解决跨域问题

vue.config.js 解决跨域问题

需求

比如请求login页面的login接口：https://www.bgdjx.com:8080/plat/login出现跨域问题。进行下方的配置后，前端显示http://localhost:8080/api/login，从而实现跨域。

原理

将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。

注意

配置后需要重启项目。

实现

vue.config.js 配置 

module.exports = {
  publicPath: "./",
  devServer: {
    host: "0.0.0.0",
    proxy:{ 
      '/api':{
          target:'https://www.bgdjx.com:8080/plat/',
          ws:true,
          changeOrigin:true, //允许跨域
          pathRewrite:{
              '^/api':'', 
          }
      }
    }
  },
};

getData.js 接口配置

import axios from "axios";
// export const baseURL = "https://www.bgdjx.com:8080/plat/";
export const baseURL = "/api/"; 
axios.defaults.baseURL = baseURL;