webpack之跨域

前后端分离开发中,本地前端开发调用接口会有跨域问题,一般有以下几种解决方法:

  • 直接启动服务端项目,再将项目中的资源url指向到前端服务中的静态资源地址,好处在于因为始终在服务端的环境中进行资源调试,不存在接口的跨域访问问题,但是缺陷也比较明显,需要同时启动两套环境,还需要借助nginx,charles等工具进行资源地址的代理转发,配置比较繁琐,对开发者对网络的理解和环境配置要求较高,资源开销也大;

  • CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 等配置,利用跨域资源共享实现跨域,前端部分只要求支持xhr2标准的浏览器,但是服务端在请求头中需要在header中做响应头配置,在一定程度上还是对服务端的接口设置有一定的依赖;

  • http-proxy:用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,由于利用了http-proxy代理的模式进行了转发,采用的是服务对服务的模式,能较为完美解决本地开发时候的跨域问题,也是本文中推荐的方式。

参考:

https://segmentfault.com/a/1190000009266900