javascript - 前后端分离部署,基于vue+axios+webpack,如何解决跨域请求?
本文介绍了javascript - 前后端分离部署,基于vue+axios+webpack,如何解决跨域请求?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
项目是用vue+axios+webpack来构建的,在开发测试阶段,因为利用webpack配置了跨域代理,所以开发的时候的跨域已经解决,可以正常访问服务端的数据.
但是当我build了项目,将生成的文件放到tomcat里面测试,发现之前配置的跨域代码不起作用了,http请求变成了localhost的本地请求,导致了接口请求的404错误了.
请问大神们,我该如何配置或者做什么修改,才达到前后端分别部署到两个不同服务器上,接口能正常请求呢?
devServer: {
historyApiFallback: true,
noInfo: true,
port: 8080,
proxy: {
'*': {
target: 'http://xx.xx.xx.xx:58181/',
changeOrigin: true,
secure: false
}
}
上面的是我的webpack开发时解决跨域的配置.
解决方案
在代码中根据 process.env.NODE_ENV 区分是开发还是生产环境,然后设置不同的 url。
另外,服务器要设置 CORS 相关的 HTTP 头。
这篇关于javascript - 前后端分离部署,基于vue+axios+webpack,如何解决跨域请求?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文