vue-cli设置代理实例

前言

因为碰到了跨域的问题无法解决，所以我就尝试了一下设置代理。但是因为网上的设置代理我没有理解到位，导致我设置代理一直失败。前几天终于成功，在这里我做个笔记

在config中新建一个文件命名为proxyConfig.js

  proxy: {
        '/apis': {    //将www.exaple.com印射为/apis
            target: 'https://www.exaple.com',  // 接口域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/apis': ''   //需要rewrite的,
            }              
        }
  }
}

我们需要把这个变成我们自己的proxyConfig.js
我要请求的接口地址，他长这样 http://46.91.224.73/weekly_war
因此我的接口域名是 http://46.91.224.73
我的/apis是’/weekly_war’

module.exports = {
  proxy: {
    '/weekly_war': {    //将www.exaple.com印射为/apis
      target:  'http://46.91.224.73',  // 接口域名
      // secure: false,  // 如果是https接口，需要配置这个参数
      changeOrigin: true,  //是否跨域
      // pathRewrite: {
      //   '^/api': ''
      // }
    }
  }
}

config文件夹下的index.js引入proxyConfig.js：

var proxyConfig = require('./proxyConfig')

config文件夹下的index.js中的dev加一个proxyTable属性

dev: {
    proxyTable: proxyConfig.proxy,
  }

修改本地hosts文件

window文件路径一般是C:\Window\System32\drivers\etc，mac则直接前往文件夹/etc/hosts，打开hosts文件，在这一段下面把localhost设置进去

# localhost name resolution is handled within DNS itself.
# 127.0.0.1       localhost
# ::1             localhost
127.0.0.1                   activate.adobe.com
127.0.0.1                   practivate.adobe.com
127.0.0.1                   lmlicenses.wip4.adobe.com
127.0.0.1                   lm.licenses.adobe.com
127.0.0.1                   na1r.services.adobe.com
127.0.0.1                   hlrcv.stage.adobe.com

localhost                  http://46.91.224.73      

如何使用来发起请求？

this.$axios.get('weekly_war/task/getTasks.do' ).then(
        });