webpack-dev-server解决跨域

目前解决跨域常用的方法是采用 webpack-dev-server 结合 proxy 接口代理或者使用 Nginx 均可配置跨域的代理。由于在本地配置好 webpack-dev-server 之后，所有项目成员都可以使用，一劳永逸。我们采用了配置 webpack-dev-server 中 proxy 的接口代理，在 webpack.config.js 文件中对 webpack-dev-server 配置如下：

proxy:[
{
      context:['/user','/apis'],//使用context属性，可以把多个代理到同一个target下
      target:'https://rsp.jd.com/',//把用 user 和 apis 开头的接口代理到 https://rsp.jd.com/域名下
      secure:false,//默认不支持运行在https上，且使用了无效证书的后端服务器，这里设置为true，可以支持
        changeOrigin:true,
//如果接口跨域，需要进行这个参数配置
        pathRewrite:{'^/apis':''},//由于apis开头的路径，是人为添加方便区分哪些接口要代理的，所以这里去掉apis
//设置请求头
        headers:{ 
            origin:'https://plus.m.jd.com',//请求接口限制来源，所以要改动请求源
            host:'rsp.jd.com',//设置请求头的host
            referer:'https://plus.m.jd.com/index'//设置请求头的referer，因为后端接口会有限制
        }
}
]

pathRewrite的解释

更多完整内容

【第1830期】2019年京东PLUS会员前端开发之路