1.打包前的本地localhost:8080环境下可以用 proxyTable代理来解决跨域问题。
原理：用自定义名如'/api'来代替你请求数据的url地址，proxyTable会自动识别你数据请求url的地址，识别/api字符，然后将/api替换为你想要请求的原网址。
"首先要确定你的vuecli是2还是3、4"
vuecli2:
在config目录的index文件中module.exports 的dev 中加入proxyTable代理。
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
proxyTable: { //下面两个/api可以改成自己定义的名字
'/api': {
target: 'http://localhost:9900', //你的数据请求地址(此处9900为举例)
secure: true, //如果是https,加入这句代码
changeOrigin: true, //同意跨域
ws: true,
pathRewrite: {
'^/api': '',
}
}
},
}
}
当你用ajax或者axios时就可以将url中的/api变为proxyTable中target的路径，如：
axios.get({
url：'/api/wx/mymessage' //proxyTable将/api变为http://localhost:9900
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
(若已使用axios.create封装，可以在baseURL前面加入/api)
vuecli3或4:
在根目录的vue.config.js（没有这个文件可以创建）中加入proxyTable代理。
module.exports ={
devServer: {
host: "0.0.0.0",
port: 8082,
https: false,
open: true,
proxy: { //下面两个/api可以换成自己定义的名字
'/api': {
target: 'http://localhost:9900', //你的数据请求地址(此处9900为举例)
secure: true, //如果是https,加入这句代码
changeOrigin: true, //同意跨域
ws: true,
pathRewrite: {
'^/api': '',
}
}
}
}，
}
当你用ajax或者axios时就可以将url中的/api变为proxyTable中target的路径，如：
axios.get({
url：'/api/wx/mymessage' //proxyTable将/api变为http://localhost:9900
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
(若已使用axios.create封装，可以在baseURL前面加入/api)
到此解决了打包前的跨域问题
2.打包后可以用nginx代理来解决跨域问题。原理：打包后你在代码中配置的proxyTable不会被打包入dist文件中。所以要找一个外部的插件解决跨域问题。与本地环境下的proxyTable相同，nginx作为外部跨域插件非常好配置，可以直接下载使用。
nginx就是为打包的dist文件开启一个本地的localhost地址，配置好nginx后要打开nginx开启的localhost地址来运行打包文件，而不是直接打开dist里面的index文件。
下载地址：nginx: download
下载Stable version中的第三个也就是Windows版本就可以了，下载后解压。解压后文件中的exe文件可以直接运行nginx（会弹出一个cmd窗口然后消失，可以打开资源管理器查看服务是否启动）。
在启动服务之前需要配置conf中的nginx.conf文件(配置完后在任务管理器关掉nginx后重新启动)。
打包后根据请求地址不同可以分为以下三种情况：
1、请求数据地址同样为本机开启localhost地址。（一般出现在练习环境下）
2、请求数据地址为项目甲方未配置代理的内网服务器。（一般出现在项目对接环境下）
3、请求数据地址为云服务器。【云服务器的商家一般都给自己的接口解决了跨域问题，一般可以直接请求】
根据1和2情况的不同，nginx也有两种配置方式
1、请求数据地址同样为本机开启的localhost地址。
再把源代码url:'http://localhost:9966/this/go'改为url:'/api/this/go'就可以了
2、请求数据地址为项目甲方未配置代理的内网服务器。（一般出现在项目对接环境下）
源代码中的请求地址该怎么写就怎么写，此处nginx不起替换作用，只是代理开启服务器。（不用担心这样改动会造成用户也需要配置nginx才能打开网页，这不是你要想的问题，这是服务器需要配置的问题）
总结：vue产生跨域问题不只是前端问题，这个问题在后端也可以加注释块解决，但是后端解决会产生漏洞，增加网站被黑风险。不要认为这是前端或者后台应该做的工作。
