vue跨域/webpack跨域

vue中的代理proxy
1.解决的问题：
前后端分离而产生的本地开发跨域问题
2.原理：
服务器端之间不存在跨域，利用了node代理，将域名发给本地服务器，再由本地服务器请求目的服务器
3.不同版本配置文件的区别
新版本的vue跨域在vue.config.js文件（需要手动创建）配置
旧版本的在build文件夹下面的webpack.dev.conf.js文件（自动创建）配置
4.配置
配置的是devServer（本地服务器配置）下面的proxy(代理)属性
有些博客会写proxyTable是因为写在其他文件，然后再引进vue.config.js(或者webpack.dev.conf.js)

config文件夹下的index.js文件：

vue.config.js文件（或者built文件夹下的webpack.dev.conf.js文件）：
在该文件中引入config,引入文件夹会自动读取该文件夹下的index.js

config.dev.proxyTable赋值给proxy,本质上配的是proxy属性
index.js

devServer：{
 proxy:{
      '/api': {
        target: 'https://lst.com:3000',//后台接口域名
        changeOrigin: true,//是否跨域
        secure: true,  // 如果是https接口，需要配置这个参数
        pathRewrite: {
          '^/api': ''
      },
 }
}

假设本地路径是http://127.0.0.1:8080
proxy对象的’/api’属性相当于是一个标识，告知node,路径为/api时，我需要代理帮我跨域，地址是https://lst.com:3000，此时请求地址为：https://lst.com:3000/api/xx/xxxx,
但我真正要请求的地址是https://lst.com:3000/xx/xxxx，这时候 pathRewrite属性就很重要了，’^/api’:’ ’ 利用正则匹配/api，替换成空字符串，这样请求地址就变成了我们想要的地址。