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

Logo

前往低代码交流专区

更多推荐