vue打包部署线上跨域,前端vue跨域解决方案
这篇文章主要介绍了前端某视频剪辑软件打包项目，如何解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue打包项目解决跨域某视频剪辑软件项目解决跨域（打包上线无需手动切换网址)
vue打包项目解决跨域
前段时间做一个某视频剪辑软件打包成安卓和IOS的App，遇到了跨域问题，直接拿了之前项目的配置，却不起作用。
导入org。spring框架。语境。注释。配置；
导入组织。spring框架。网络。servlet。配置。注释。CORS登记处；
导入org。spring框架。网络。servlet。配置。注释。webmvc配置器；
@配置
公共类CorsConfig实现webmvc配置器{
@覆盖
public void addCorsMappings(CORS注册中心注册表){
registry.addMapping(/** )。allowedOrigins(* 。allowCredentials(true)。允许的方法(" GET "、" POST "、" PUT "、" DELETE "、" OPTIONS ")。maxAge(3600)；
}
}
但是还是不行，后面查明是因为之前项目服务器和项目在一个服务器，而应用的前端是在移动端的。解决方法有所不同，如下
导入org。spring框架。语境。注释。配置；
导入org。spring框架。http。http头；
导入组织。spring框架。网络。servlet。配置。注释。CORS登记处；
导入org。spring框架。网络。servlet。配置。注释。webmvcconfigureradapter
@配置
公共类LakeAppConfigurer扩展WebMvcConfigurerAdapter {
@覆盖
public void addCorsMappings(CORS注册中心注册表){
registry.addMapping(/** )。allowedOrigins(* 。allowCredentials(true)。allowedHeaders(* )。允许的方法(" GET "、" POST "、" DELETE "、" PUT "、" OPTIONS ")。exposed header(http headers .SET_COOKIE).maxAge(3600升)。maxAge(3600)；
}
}
完美解决。
vue项目解决跨域（打包上线无需手动切换url）
1、在目录配置下的索引。射流研究…中设置代理；
proxyTable: { //设置代理
/api: { //使用/api 来代替跨域地址139.xxx.xx
目标： http://139.xxx.xx ，//源地址
changeOrigin: true，//改变源
路径重写：{ //路径重写
^/api: http://139.xxx.xx
}
}
},
2、分别配置开发环境和生产环境地址
在配置目录下开发环境射流研究…中配置开发路径：
module.exports=merge(prodEnv，{
节点环境："开发",
API_HOST: /api //配置代理路径的符号，增加的内容
})
在配置目录下产品环境中配置开发路径：
模块。导出={
节点环境："生产",
API_HOST: http://139.xxx.xx //生产环境地址，增加的内容
}
3、在组建中进行使用，这里使用vue-资源；
//process.env.API_HOST获取当前环境的美国石油学会(美国石油协会)地址
方法：{
getData: function(){
这个. http。获取(过程。环境。API _ HOST /AiaaScadaSys/monitor db/info ).然后((响应)={
这个$数据。数据_姬胡易=回复。正文[0]；
控制台。日志(这个。数据_姬胡易)；
},(响应)={
返回回应。JSON()；
});
},
}
小结：经过这样的配置后可以比较完美的解决跨域的问题而不用担心在打包上线的时候还要手动修改美国石油学会(美国石油协会)地址，而且维护成本也低。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。