前言当我们使用vue-cli启动项目时，npmrundev就可以启动我们的项目。通常我们的请求地址是localhost:8080来请求接口数据。无法在本地主机上设置cookie。我们可以在vue-cli配置文件中设置代理。跨域的方法有很多，通常需要在后台进行配置。我们可以直接通过node.js代理服务器实现跨域请求。vueproxyTable接口跨域请求调试在vue-cli项目的config文件夹下的index.js配置文件中，dev是这样的：dev:{env:require('./dev.env'),port:8080,autoOpenBrowser:true,assetsSubDirectory:'static',assetsPublicPath:'/',proxyTable:{},cssSourceMap:false}如果服务器提供的接口像https://www.exaple.com/server...,我们把域名提取出来比如https://www.exaple.com；在config中创建一个名为proxyConfig.js的新文件:module.exports={proxy:{'/apis':{//Injectwww.exaple.comFor/apistarget:'https://www.exaple.com',//接口域名secure:false,//如果是https接口，需要配置该参数changeOrigin:true,//是否跨域pathRewrite:{'^/apis':''//Rewrite是必须的，}}}}如果接口地址本身有'/api'的公共前缀，也就是https://www.exaple.com/api，可以把pathRewrite删掉。config文件夹下的index.js引入proxyConfig.js:varproxyConfig=require('./proxyConfig')config文件夹下index.js中的dev改为：dev:{env:require('./dev.env'),port:8080,autoOpenBrowser:true,assetsSubDirectory:'static',assetsPublicPath:'/',proxyTable:proxyConfig.proxy,cssSourceMap:false}重启项目npmrundev:你会发现这次我们设置好了本地API代理和修改本地hosts文件，window文件路径一般为C:WindowSystem32driversetc，mac直接进入文件夹/etc/hosts，打开hosts文件，在这一段设置localhost。本地主机名称解析在DNS本身内处理。127.0.0.1localhost::1localhost127.0.0.1activate.adobe.com127.0.0.1practivate.adobe.com127.0.0.1lmlicenses.wip4.adobe.com127.0.0.1lm.licenses.adobe.com127.0.0.1na1r.services.adobe.com127.0.0.1hlrcv.stage.adobe.comlocalhostwww.exaple.com大功告成至此我们就彻底解决了跨域问题，并且本地测试后台无法根据我们本地环境情况设置cookies。补充的在线地址是什么写一个config.js文件作为项目地址的配置。如下：//项目域名地址consturl='https://exaple.com';letROOT;//Root会被封装在封装的axios请求中。为了方便，后面就不改了，判断当前环境。和生成的不同ROOTif(process.env.NODE_ENV==='development'){//开发环境中的代理地址，解决本地跨域和跨域，在index.jsdev.proxyTable中配置ROOTintheconfigdirectory="/apis"}else{//生产环境中的地址ROOT=url;}exports.PROXYROOT=url;//代理指向地址exports.ROOT=ROOT;这里暴露了两个接口，一个作为代理指向地址，也就是真正的请求地址，一个是我们ajax请求的地址。我们在我们配置的ajax中引入ROOT，然后修改proxyConfig.js如下：constconfig=require("../src/fetch/config");//更改路径为module.exports={proxy:{[config.ROOT]:{//注入www.exaple.comas/apistarget:config.PROXYROOT,,//接口域名secure:false,//如果是https接口，需要配置这个参数changeOrigin:true,//是否跨域pathRewrite:{[`^${config.ROOT}`]:''//需要重写}}}}之后，无论是生产环境还是开发环境，我们都不再需要修改我们的请求地址。文笔比较草率，没有整理思路，自己总结一下。也就是说，在我们之前的方法中，npmrundev时，ajax请求接口地址需要带上/apis，而如果我们在npmrunbuild中，则需要将ajax接口地址改为真实地址www.exaple.com，非常不方便，每次都要换。然后我们通过process.env.NODE_ENV判断环境，从而导出不同的接口。
