axios中proxyTable代理设置

自从vue2.0不再更新vue-resource，便出现了axios，这里附上axios的官网：https://www.npmjs.com/package/axios，里面的文档也很详细，安装这里就不说了，大家可以自己去官网看看，今天主要讲讲axios的跨域解决方法。

解决的方式有两种：

一、让后端设置CORS，允许我们请求。

二、前端在webpack中设置proxyTable{}代理。

我们今天着重讲第二种：proxyTable{}代理。

前端的地址为http://localhost:8080，后端的接口地址是http://www.sener.com/login， 这就违反了浏览器的同源策略，所以会报如下错误提示，

http状态码为403（权限不足）：

打开vue项目config文件夹下的index.js在里面把proxyTable: {}设置成下面的：

proxyTable: {

      '/api': {

        target: 'http://www.sener.com', // 接口的域名

        // secure: false,  // 如果是https接口，需要配置这个参数

        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置

        pathRewrite: {

          '^/api': ''       //这是一个通配符，设置完了之后每个接口都要在前面加上/api（特别注意这一点）

        }

      }

    },

接口调用方法：

axios.post("/api/login", {

          userName: "zhangsan",

          password: "111111"

      }).then(function (response) {

        console.log(response);

      }).catch(function (err) {

        console.log(err);

      });

写完后重启项目，应该就可以代理成功了。

至于为什么会存在跨域这个问题，以下是我个人的一点理解，希望各位大佬可以提提建议。

首先，axios 发送请求时的数据默认是 JSON 格式的，这是导致用 axios POST 跨域出错的主要原因。

根据 CORS 的标准，当浏览器发送跨域请求时，如果请求不是GET或者特定POST（Content-Type只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain的一种）时，强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request)，从而获知服务器端对跨源请求所支持 HTTP 方法。

所以，使用 axios 直接发送 POST 的跨域请求，如果web后端对 OPTIONS 的响应有问题，就会报错。

至于为何 XHR 可以，我觉得跟form-urlencoded这种数据格式有关。

这里附上CORS的补充：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#