反向代理 后端处理

• 反向代理

# 开发环境

前端采用mockjs进行数据模拟，如切换至真实接口，可借助express配置反向代理。如拦截前缀sale的接口，可在config/index.js里配置：

一、

proxyTable: {

'/sale': 'http://192.168.0.15:8432'

},

同时在main.js注释掉"import './mock/index.js';"来禁用模拟接口功能

 

二、

你可以通过设置将复杂的url简化，例如我们要请求的地址是api.xxxxxxxx.com/list/1，可以按照如下设置：

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

这样我们在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
那么又是如何解决跨域问题的呢？其实在上面的'list'的参数里有一个changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。增加的代码如下所示：

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

vue-cli的这个设置来自于其使用的插件http-proxy-middleware
github：https://github.com/chimurai/http-proxy-middleware
深入了解的话可以看该插件配置说明，似乎还支持websocket，很强大的插件。

 

# 生产环境

如独立前后端独立部署，面临跨域问题，可在Nginx等配置反向代理。

• 后端处理
  • 1.页面URL中所有path不能重复，菜单文件夹无需返回。具体请参考登录接口说明和具体代码。
  • 2.权限前端已有检测，但后端扔需另行检测，尤其是接口。如发现用户无访问接口权限，则在返回接口的response的header里携带这个值"X-Auth-Token"。前端已设置全局http拦截器，检测到含此值时，会将用户跳转至登录界面。(理想情况，需测试)
  • 3.code和msg是所有接口的必备返回值。前端在code为000时视为接口正常，非000时无视错误类型，直接抛出msg
  • 4. 404页面：http://localhost:9529/#/404
  • 可前往src/404.vue修改