webpack设置代理

设置代理的原因

我用 react开发spa应用，首先开发过程中用的是模拟数据，这个没有问题，但是当和后端对接接口的时候，各种问题就来了。我这边的后台是.net开发，楼主做之前做的是java，对这他们的配置不太熟悉。.net给的是WEB API的接口，服务器是IIS7.5，楼主开始掉他们接口的时候，http返回的是405，方法不被允许。这时候我就纳闷了啊，咋回事呢。因为我这次开发是我的第一个react项目，首先我不能确定是不是我前台代码的问题，我用的ajax框架是axios，在楼主反复测试确认我的代码没问题之后。我就怀疑是后端的问题，因为我的请求已经被iis服务器接收到，而服务器给我返回的是405,。我这就开始怀疑，是不是他们的配置有问题，结果我查了好多资料文档，的确说微软的这个服务器，还有WEB API的配置可能存在问题会造成405，当楼主请求后端帮助的时候遇到后端甩锅，后端的意思是自己写ajax可以调的通，而且他们配置了跨域，所以就不存在问题，说是前端的代码有问题。没招，只能在开发群里求助，大神们告诉我用POSTMAN去测试接口，我测试了之后依然不通。这时候，我就不能理解了，我自己也试过，用jquery写一个ajax，调请求就通，而POSTMAN，百度API工具，还有我的代码里面去调接口，都是不通的，这是为啥呢？没人帮助只能自己想办法解决呀。这时候，我想起来，会不会是他们的跨域配置的不对呢，我要不要在我的本地设置一个代理试试呢？结果，代理一设置完毕，接口立马就调通了。这时候的感觉，那是坑，坑，坑（重要的事情说三遍）。

如何配置webpack的代理

因为我以前配置过nginx的代理，所以开始我就参照nginx的配置，很容易就配置成功：

首先在webpack里添加devserver ,proxy：

devServer: {        //其实很简单的，只要配置这个参数就可以了        proxy: {            '/engineer/*': {                target: 'http://dws.XXXXX.com',                secure: false            }        }    }

接着代码里的ajax请求这么写：

//webpack proxy    return axios({        method: 'get',        responseType: 'json',        url: 'http://localhost:8080/engineer/api/Order/GetOrderListByEngineer?itcode='+itcode+'&pageindex='+pageIndex+'&pagesize='+pageSize    });

当然你也可以把localhost:8080去掉写绝对路径，这么配置之后，访问的请求实际上，被转发的地址为：

http://dws.XXXXX.com/engineer/api/Order/GetOrderListByEngineer?itcode='+itcode+'&pageindex='+pageIndex+'&pagesize='+pageSize

出现方法不被允许，返回405的原因

我用跨域的解决办法，已经解决这个问题，所以基本上可以确定该问题是跨域的问题。

我在网上看到类似这种问题的解释原因，但是没有看到axios，或者说是跟react相关的，我找了一个angular的原因，描述的跟我这个差不多：

一般前端框架比如" ExtJS "、" AngularJS ", 框架监测到访问的域名可能存在跨域的话会先发送一个 OPTIONS 请求，验证是否可进行通信，如果返回可通信才会真正发起一个POST、GET请求。

下图是框架发起的OPTIONS请求，当如果服务器的Nginx并没有设置允许跨域请示的时候，它会返回一个 405 状态码。

这个图和我的问题简直就是一模一样，我明明发送一个post请求，结果返回的却是一个options请求，我在想，会不会是axios框架，也会认为我这是一个跨域请求，所以也先发送了一个options请求结果后台不允许，所以就返回405了？