解决前后端分离开发，后端重定向不到前端页面问题

问题描述

公司项目使用的是springboot+angularjs这种前后端不完全分离的开发方式，前段时间把项目改成springboot+vue前后端完全分离，开发过程中有个后端重定向问题。后端项目地址：http://localhost:8080/，前端项目地址：http://localhost:9090/，比如后端redirct:"/#/main"重定向到这个页面，浏览器重定向的却是http://localhost:8080/#/main后端项目的地址，找了很久最终在webpack中找到解决方案。

解决方案

我们可以在devServer.proxy.onProxyRes中做处理，配置如下:

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
        onProxyRes: function(proxyRes, req, res) { // 监听代理的返回结果
        const location = proxyRes.headers['location']
        const locationRE = /http(?:s)?:\/\/[0-9.:]+?(\/.*?[a-zA-Z]+)$/
        if(location) {  // 后端重定向的话返回headers中会有location
          const matched = location.match(locationRE)
          const matchGroup = matched && matched[1]
          proxyRes.headers['location'] =  matchGroup ? `http://localhost:9090${matchGroup}` : location
        }
      }
    }
  }
...
}