webpack中vue-cli开发跨域的问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014520745/article/details/71120103

在使用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',
}
阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页