vue使用webpack代理跨域

发表于

vue-cli3 使用webpack跨域

  1. 在项目根目录下的 vue.config.js 里添加配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    ...
      chainWebpack: config => {
        config.resolve.alias
          .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
          .set('_c', resolve('src/components'))
          .set('_conf', resolve('config'))
      },
      //添加如下配置
      devServer: {
        proxy: {
          'api': {
            target: 'http://article.cn/', // 目标域名，可以是ip地址
            changeOrigin: true,   		  // 将主机头的起始位置更改为目标URL
            secure: false,
            pathRewrite: {'^/api' : ''}, // 将使用时用来匹配的api去掉
          }
        }
      }
    }

  2. 使用：

    1
    2
    3
    4
    5
    6
    7
    axios.request({
          url: '/api/article/create_article',
          data,
          method: 'POST'
        })
        .then(data => { })
        .catch(error => { })

我实际要访问的地址是：http://article.cn/article/create_article。其中http://article.cn域名是通过代理添加上的，/api是pathRewrite: {'^/api' : ''}这句去掉的。

注：我这里axios使用 baseURL 配置了本地域名 http://localhost:8080/

vue-cli2 使用webpack跨域

参考：https://www.jianshu.com/p/7f1c8037dc7b

  1. 在 config 文件夹下的 index.js 文件里找到 proxyTable 项，它默认是空的
    1
    2
    3
    4
    5
    6
    7
    8
    module.exports = {
      dev: {

        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},
    ...

与上面一样添加配置：

1
2
3
4
5
6
7
8
proxy: {
  'api': {
    target: 'http://article.cn/',
    changeOrigin: true,   		  
    secure: false,
    pathRewrite: {'^/api' : ''}, 
  }
}

options (‘api’后面的值)

  • options.target:要与url模块解析的url字符串
  • option.forward：要用url模块解析的url字符串
  • option.agent：要传递到http（s）的对象.request（请参阅节点的
  • https代理和http代理对象）
  • option.ssl：要传递给https.createServer（）的对象
  • option.ws：true/ false：如果要代理websockets
  • option.xfwd：true / false，添加x-forward标头
  • option.secure：true / false，如果要验证SSL Certs
  • option.toProxy：true / false，将绝对URL传递给path（用于代理代理）
  • option.prependPath：true / false，默认值：true - 指定是否要将目标路径添加到代理路径
  • option.ignorePath：true / false，默认值：false - 指定是否要忽略传入请求的代理路径（注意：如果需要，您将必须附加/手动）。
  • option.localAddress：绑定传出连接的本地接口字符串
  • option.changeOrigin：true / false，默认值：false - 将主机头的起始位置更改为目标URL
  • option.auth：基本认证，即’user：password’来计算授权头。
  • option.hostRewrite：重写（301/302/307/308）重定向上的位置主机名。
  • option.autoRewrite：根据请求的主机/端口重写（301/302/307/308）重定向的位置主机/端口。默认值：false。
  • option.protocolRewrite：将（301/302/307/308）上的位置协议重写为“http”或“https”。默认值：null。
  • option.cookieDomainRewrite：重写set-cookie标题的域。可能的值：false（默认）：禁用cookie重写String：例如，新cookieDomainRewrite: “new.domain”。要删除域，请使用cookieDomainRewrite: “”。
    对象：将域映射到新域，用于”*”匹配所有域。例如，保持一个域不变，重写一个域并删除其他域：
    1
    2
    3
    4
    5
    cookieDomainRewrite: {
    "unchanged.domain": "unchanged.domain",
    "old.domain": "new.domain",
    "*": ""
    }