webpack中vue-cli开发跨域的问题
在使用webpack做开发调试的时候,因为需要使用nodejs服务器作为前端页面的服务器。如果后端使用的是Java(比如后台是Java代码部署在Tomcat服务器上),那前端页面发送http请求、保存cookie等都会存在跨域请求不了或者保存不了的问题还有个额外遇到的问题是在我后台使用Shiro框架来保存用户session的时候,通过路由跳转带另外的页面,然后再发送https请求的时候,sessi
在使用webpack做开发调试的时候,因为需要使用nodejs服务器作为前端页面的服务器。如果后端使用的是Java(比如后台是Java代码部署在Tomcat服务器上),那前端页面发送http请求、保存cookie等都会存在跨域请求不了或者保存不了的问题
还有个额外遇到的问题是在我后台使用Shiro框架来保存用户session的时候,通过路由跳转带另外的页面,然后再发送https请求的时候,session信息获取为空,就算我在后端设置了allow origin
解决方法:在前端解决,在webpack配置文件config/index.js中的dev下有个proxyTable的配置项,在里面加入你在页面中用到的请求:
1.下面代码中,要配置changeOrigin为true,意思是会用target的这个url去替换掉npm run dev后打开的url地址,这个配置你后端服务器开启的url就可以了。然后target属性配置到端口那。
2.json中的建’/chats’的意思是会把url中的有这个字符串的部分替换成pathRewrite中的值。
3.pathRewrite是路由配置,键一般和2中说到的chats,然后再前面加上^,表示以这个url开头的。值也对应着配置上。
proxyTable: {
'/chats': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/chats': '/chats'
}
},
'/login': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/login': '/login'
}
},
'/getDirectory': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/getDirectory': '/getDirectory'
}
},
'/static': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/static': '/static'
}
}
然后请求的时候的url可以这样写:
var common = {
AUTO_REPLY_LIST_URL : 'chats/autoReplyList',
ADD_AUTO_ANSWER_URL : 'chats/addAutoReply',
USER_GROUP_URL : 'chats/usersGroupByAbility',
DO_LOGIN_URL : 'login',
GET_DIRECTORY_URL : 'getDirectory',
}
更多推荐
所有评论(0)