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

逃离我推掉我的手 2022-06-16 02:30 173阅读 0赞

> 在使用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',
    }