vue项目打包上线还存在跨域问题吗?,vue生产环境跨域问题
本文主要介绍VueCli生产环境包部署跨域失败的解决方案，有很好的参考价值，希望对大家有所帮助。来和边肖一起看看吧。
常见的跨域配置(/config/index.js):
代理表：{
/api: {
target: 3358192 . 168 . 2 . 139:8080/mobile/max ，//接口的域名
//secure: false，//如果是https接口，需要配置这个参数。
ChangeOrigin: true，//如果接口跨域，需要配置这个参数。如果为真，请求的头将被设置为匹配目标服务器的规则(Access-Control-Allow-Origin)
路径重写：{
/api : //它的接口地址没有通用前缀/API ，所以需要重写，如果有就移除。
}
}
},
使用：“/API/getdata”
在开发和调试过程中，使用axios进行数据交互是没有问题的。但是打包部署到服务器时发现404，报告跨域错误。研究发现仍需配置。
config文件夹里还有两个文件，dev.env.js和prod.env.js，分别是开发环境和生产环境的配置文件，我们需要分别进行修改。
dev.env.js（开发环境）
const merge=require( web pack-merge )
const prodEnv=require(。/prod.env )
module.exports=merge(prodEnv，{
NODE_ENV:“开发”，
VUE应用基础应用编程接口：/应用编程接口
})
Prod.env.js(生产环境)
模块.导出={
NODE_ENV:“生产”，
vue _ app _ base _ api: 3358192.168 . xx:XXX //项目API地址
}
注意属性值中的双引号，否则将会报告错误(未终止的字符串常量)。
配置完成后，程序会自动判断是开发环境还是生产环境，然后匹配VUE_APP_BASE_API。
可以通过process.env.VUE_APP_BASE_API访问VUE_APP_BASE_API。
每次用API地址：process.env.vue _ app _ base _ API会比较麻烦。这时候我们可以设置axios的baseuURL。
一般我们会自己编写一个axios拦截器，生成一个axios对象，进行token等安全验证。然后将这个对象引用到main，js，并将其挂载到vue实例上。这里就不赘述了。网上有很多。
生成axios对象设置基本URL:process . env . vue _ app _ base _ API
这是我项目中axios拦截器部分代码
设置完成后，记得重启项目。我们可以通过调用数据省略process.env.VUE_APP_BASE_API，直接写接口地址方法名字符串。
比如：这个。$ axios . get(process . env . vue _ app _ base _ API /get data )变成这样。$ axios.get (/getdata )
补充知识：vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
一、开发环境中跨域
Vue-cli创建的项目开发地址是localhost:8080，需要访问接口http://10.1.0.34:8000/queryRole，这个接口不在本地计算机上。
不同域名之间的访问需要跨域才能正确请求。
有很多跨域的方法，通常需要后台配置。但是对于Vue-cli创建的项目，可以直接使用Node.js代理服务器，修改vue proxyTable的接口，实现跨域请求。在vue-cli项目的config文件夹下的index.js配置文件中，修改前的dev:
开发人员：{
env: require(。/dev.env )，
端口：8080，
autoOpenBrowser:真的，
资产子目录：静态，
assets public path:“/”，
代理表：{}，
cssSourceMap: false
}
只需修改其中的proxyTable: {}项即可。
代理表：{
/api: {//代理地址
Target: 335810.1.0.34: 8000/，//需要代理的地址
ChangeOrigin: true，//是跨域的吗？
安全：假，
路径重写：{
/api :///它自己的接口地址没有通用前缀/API ，所以需要重写，如果有，就去掉。
}
}
}
然后重新启动项目npm运行dev。
请求数据时，在URL前加上“/api”，就可以跨域请求了。
自我。$axios.get(/api/queryRole ，{params: params})。然后((res)={
console . log(RES)；
}).catch((err)={
console . log(err)；
})
1、参数proxyTable详解：
vue-cli配置文件中的参数：proxyTable，主要是一个地址映射表。你可以通过设置来简化复杂的url，比如我们要请求的地址是api。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。