Vue-devServer.proxy代理配置

1、基本用法

// vue.config.js
devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:81',
    }
  }
}

// vue/src/api/index.js
import http from './httpInstance'
const prefix = process.env.NODE_ENV === 'development' ? '/api' : '/api'
const getList = data => {
  return http({
    method: 'post',
    url: prefix + '/getList',
    data
  })
}

        现在，请求到 /api/xxx 现在会被代理到请求http://localhost:81/api/xxx，例如 /api/getList现在会被代理到请求 http://localhost:81/api/getList。

2、忽略API前缀

        如果不希望传递/api，则需要重写路径：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:81',
      pathRewrite: { '^/api': '' },
    }
  }
}

        现在，请求到 /api/xxx 现在会被代理到请求 http://localhost:81/xxx, 例如 /api/getList 现在会被代理到请求 http://localhost:81/getList。

3、代理多个路径

        如果想将多个特定路径代理到同一目标，则可以使用一个或多个带有context属性的对象的数组：

devServer: {
  proxy: [{
    context: ['/auth', '/api'],
    target: 'http://localhost:81',
  }]
}

4、忽略https安全提示

        默认情况下，不接受运行在https上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false 就行。修改配置如下：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:81',
      secure: false,
    }
  }
}

5、解决跨域原理

        默认情况下，代理时会保留主机头的来源，可以将changeOrigin设置为true以覆盖此行为：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:81',
      changeOrigin: true,
    }
  }
}

6、自定义规则

        有时如果不想代理所有的请求。可以基于一个函数的返回值绕过代理。 在函数中可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。 例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理。你可以这样做：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:81',
      bypass: function (req, res, proxyOptions) {
        if (req.headers.accept.indexOf('html') !== -1) {
          return '/index.html';
        }
      },
    }
  }
}

7、更多参数

target："xxx",            // 要使用url模块解析的url字符串
forward："xxx",           // 要使用url模块解析的url字符串
agent：{},                // 要传递给http(s).request的对象
ssl：{},                  // 要传递给https.createServer()的对象
ws：true/false,           // 是否代理websockets
xfwd：true/false,         // 添加x-forward标头
secure：true/false,       // 是否验证SSL Certs
toProxy：true/false,      // 传递绝对URL作为路径（对代理代理很有用）
prependPath：true/false,  // 默认值:true 指定是否要将目标的路径添加到代理路径
ignorePath：true/false,   // 默认值:false 指定是否要忽略传入请求的代理路径
localAddress："xxx",      // 要为传出连接绑定的本地接口字符串
changeOrigin：true/false, // 默认值:false 将主机标头的原点更改为目标URL