Proxy

时间:2019-07-05
本文章向大家介绍Proxy,主要包括Proxy使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

vue-cli3.0项目,假如我们有以下文件逻辑:

.env.development

  url = http:developDomain/app

vue.config.js

  devServer: {

    proxy: {
    '/api': {
      target: process.env.url, // 通过NODE_ENV配置不同的api地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    },
  }
api/base.js
  let base
  switch (process.env.NODE_ENV) {
    case 'development':
      base = '/api'
      break
    case 'production':
      switch (process.env.VUE_APP_env) {
        case 'test':
          base = 'https://testDomain/app'
          break
        default:
          base = 'https://productionDomain/app'
      }
      break
    default:
  }
  export default {
    base
  }
api/index.js(设置axios,config配置default,拦截器)
  axios.defaults.baseUrl = 'http:developDomain/app'
api/request.js
  import { base } from @/api/base
  login: (data) => axios.post(`${base}/login`, data)
则:
  我们在development模式下,发出的login接口请求的逻辑会是这样:
  1、首先axios.default.baseUrl的值,会被实际aixos调用时候的路径取代,变为/api/login
  2、这时因为/api路径的原因,请求会先被proxy识别(vue.config.js proxy)进入里面逻辑,将路径改写为target值(这里我的是process.env.url,我在development模式下是.env.development文件里定义的url),我猜测这时会由vue-cli的内置服务(@vue/vue-cli-services的node服务)将请求转到target路径上。这样我们的请求就看起来是这样:localhost:8080/请求localhost:8080/api/login(最后我们看到的结果也确实是这样,chrome控制台的network显示请求信息:Request URL:http://localhost:8083/api/mg/login),由node服务将此请求转到target上进行请求
  3、服务代理的原理和用处,大概就是,前端请求自己本地服务,然后由一个服务将请求转发,可以解决前端跨域(CORS跨域资源共享)的问题。如果开发时直接用axios调一个同事启动的服务的接口,就会存在跨域问题,即使后台设置了Access-Control-Allow-Origin允许跨域,如果交互上要传cookie请求头还是会被浏览器默认不携带cookie,而使用proxy之后,axios的请求才能由浏览器将本地cookie携带上传给一个不同域的后台
  4、比如我设置的后台url--http://10.22.33.444:8080/app服务未开启,发出的请求status code为500 Internal Server Error, 查看preview将会提示Proxy error: Could not proxy request /mg/login from localhost:8083 to http://10.22.33.444:8080/app (ECONNREFUSED)

原文地址:https://www.cnblogs.com/aniviah/p/11136485.html