config.js中设置devServer.proxy解决跨域问题

module.exports = {
  // 配置 axios 代理请求
  devServer: {
    host: '0.0.0.0', //ip地址
    hot: true, //热加载
    port: 8080, //端口
    https: false, //false关闭https,true为开启
    open: true, //自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://139.155.91.117:8082',
        // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api/xxx即可
          '^/api': '/'
        }
      },
      '/api2': {
        target: 'http://192.168.1.102:7480',
        // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api/xxx即可
          '^/api2': '/'
        }
      },
    }
  },
  runtimeCompiler:true
}

使用

// const BASE = 'http://139.155.91.117:8082'
const BASE = '/api' // 把原先的base改为代理的'/api'

// 查询
export const reqIdData = id => ajax(BASE + (id ? `/base/gps/${id}` : '/base/gps'))

结果
config.js中设置devServer.proxy解决跨域问题_第1张图片

你可能感兴趣的:(vue)