webpack之proxyTable设置跨域----vue

      现在的公司是前后端分离开发，这样不可避免会遇到一个问题-------跨域。之前在用jq开发的时候都是让后台加Access-Control-Allow-Origin:*。但是即使是这样，浏览器请求的时候还是会有两个请求，一个option，一个真正的post/get请求，真的很烦。接触了angular和vue以后才知道可以用代理来处理。

在项目中，可以看到config/index.js文件中，dev下面的proxyTable为空：

 更改为：

 proxyTable: {
    '/api': {
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      secure: false, // 允许https请求      
      pathRewrite: {
        '^/api': '/api'   //重写接口
      }
    }

更改这个文件，npm是不会自动更新的，所以这会去调接口会报404。把现在的进程停掉，重新npm run dev一下再去调接口就好了。

proxyTable配置的意思为：使用字符串"/api"来代替目标接口域名；如果接口地址为"user/getUserInfo",我们可以在所有的接口地址前面加上"/api/"用于设置代理；如:

'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/api/user/getUserInfo'

如果你不想每次请求地址中都带有"/api/",则可以设置

 pathRewrite: {
    '^/api': ''   // 后面可以使重写的新路径，一般不做更改
 }

表现结果为：

'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/user/getUserInfo'