Webpack使用代理实现跨域一.跨域问题解决：跨域只存在前端在config文件内设置proxy属性进行使用代理设置封装

一.跨域问题解决：跨域只存在前端

Access-Control-Allow-Origin：不允许跨域

后端可设置允许跨域，处于同源策略，前端和后端Api服务器不在同一台主机上，后台有自己的服务器，前端上线时也有自己的服务器，ip相同，端口不同，出现跨域问题，只针对浏览器端，对于后端语言不存在跨域问题，在node.js使用代理转发，cros，后端允许跨域使用代理实现跨域，在config文件中配置proxy属性

在config文件内设置proxy属性进行使用代理设置

      module.exports = {
        devServe :{
          port:8888,//端口号，被占用自动提升加1
          host:"localhost",//主机名，127.0.01 真机 0.0.0.0
          https:false, //协议
          open:true,//启动浏览器自动打开
          proxy:{//设置跨域  //http://localhost:8001/banner.json 
            //代理访问跨域请求json /dev-api/banner.json
            "/dev-api":{//相当于请求8001
              target:"http://localhost:8001",//动态可更换，其他不可
              changOrigin:true,//允许开启代理，创建虚拟服务端
              pathRewrite:{ //匹配以dev-spi开头的设置为空
    					"^/dev-api":""，
              }	
            }
          },
          "test-api":{
            //以数组对象形式进行跨域
            target:"http://localhost:8002"
          }
        },
        lintOnSave:false,//关闭格式请求
    		productinSourceMap:false
      }

封装axios的api文件中设置接口路径为config的方法名

   const request = axios.create({ //创建的实例返回一个对象,实例对象
   	baseURL:"/dev-api",  
     //请求路径，基础接口路径 请求8001时经过/dev-api相当于请求//http://localhost:8888
     //多个跨域配置多实例，或不配置，在test里，设置变量存储
   	timeout:5000, //请求超时时间
   })

多个跨域请求地址时可使用变量方式导出

     //不配置公共路径，api，多个跨域请求
     const BASE_URL = "/dev-api";
     const BASE_URL2 = "/test-api";
     export default {
      getList(){
         return request({
         type:"get",
         url:BASE_URL+"data.json"
         }),
      },
      getBanner(){
         return request({
            type:"get",
            url:BASE_URL2+"data.json"
          }),
      }}
      //getList相当于request请求，请求返回promise对象

二.生产环境，开发环境端口不同

开发环境请求MOCK.js模拟数据，生产环境请求后台接口获取数据，不同的环境请求的url不一样，要为不同的环境匹配不同的接口地址，通过路径前缀进行匹配

配置不同环境的常量值，脚手架一般有三个模式，一个模式包含多个环境变量，为.env文件添加后缀来设置在某个模式特有的环境变量，在项目根目录创建一个名为.env.development文件，那么这个文件里生命的变量就只会在development模式中被载入

开发环境创建： .env.development文件（测试状态）

//设置环境变量 VUE_APP开头的变量会被webpack自动加载,VUE_APP_后面名称自定哟
VUE_APP_SERVICE_URI = "http://localhost:8001"
//变量的值为8001，开发环境的接口地址

生产环境创建： .env.production文件（上线状态）项目打包时切换

VUE_APP_SERVICE_URI = "http://www.vuelearn.com"
//变量的值为8001，生产环境的接口地址
VUE_APP_BASE_API = "/dev-api"

在main.js

console.log(process.env.VUE_APP_SERVICE_URI) //打印设置的环境变量，8001
//打包后才可获取的开发环境的接口

更改config文件proxy，target设置的接口地址，对应生产环境和开发环境

  module.exports = {
    devServe :{
      port:8888,//端口号，被占用自动提升加1
      host:"localhost",//主机名，127.0.01 真机 0.0.0.0
      https:false, //协议
      open:true,//启动浏览器自动打开
      proxy:{//设置跨域  //http://localhost:8001/banner.json 
        //代理访问跨域请求json /dev-api/banner.json
        [process.env.VUE_APP_BASE_API]:{
          //获取生产环境设置的变量，属性名是变量，需要通过[]包裹,后期便于维护
          target:process.env.VUE_APP_SERVICE_URI,//开发环境的接口地址
          changOrigin:true,//允许开启代理，创建虚拟服务端
          pathRewrite:{ //匹配以dev-spi开头的设置为空
            //"^/dev-api":""，
            ["^"+process.env.VUE_APP_BASE_API]:"",
          }	
        }
      },
      "test-api":{
        //以数组对象形式进行跨域
        target:"http://localhost:8002"
      }
    },
    lintOnSave:false,//关闭格式请求
		productinSourceMap:false
  }

在request.js中配置process.env.VUE_APP_BASE_API 地址

const request = axios.create({ //创建的实例返回一个对象,实例对象
        baseURL:[process.env.VUE_APP_BASE_API],  //请求路径，基础接口路径 请求8001时经过/dev-api相当于请求//http://localhost:8888
        //多个跨域配置多实例，或不配置，在test建，设置变量存储
        timeout:5000, //请求超时时间
})