码迷,mamicode.com
首页 > Web开发 > 详细

webpack-dev-server proxy代理

时间:2017-12-31 16:02:57      阅读:1281      评论:0      收藏:0      [点我收藏+]

标签:col   指令   webpack   运行   本地   3.2   请求   ges   转发   

一个最简单的代理例子:index.html中有如下代码

fetch(‘/api/pub/article/list?pageSize=2‘).then((data)=>{
    return data.json()
}).then((json)=>{
    console.log(json)
})

里面访问的是相对地址,但我本地并没有服务器有提供这些api。把以上的路径补全为云服务器上的绝对路径,但是又报CORS错误。

解决办法是配置一个代理。这里通过webpack-dev-server实现,简单的配置文件如下:

module.exports = {
  entry: {
      bundle:‘./main.js‘,
  },
  output: {
    filename: ‘[name].js‘
  },
    devServer: {
        port: 8889,
        host: ‘127.0.0.1‘,
        proxy: {
            ‘/api/*‘: {
                target: ‘http://123.207.95.11:9001‘
            }
        }
    }
};

接着运行(以当前目录作为静态文件的根目录):

webpack-dev-server --content-base ./

访问 http://127.0.0.1:8889/index.html ,以上代码可以正常执行了。

对于以上的配置和运行指令,做了如下事情:

  1. 监听 127.0.0.1:8889,以当前目录(content-base参数指令的目录)作为静态文件的根目录
  2. 访问index.html,里面发出的请求是相对地址,也就是访问了这个地址 127.0.0.1:8889/pub/..... 
  3. 因为webpack-dev-server读取以上的配置文件,这个请求匹配了 /api/* ,就把这个请求转发到了对应的target处,也就是http://123.207.95.11:9001这个地址下了。也就是请求 浏览器 -> webpack-dev-server -> 127.207.95.11 。
  4. 最后把响应数据传递到浏览器。  也就是 127.207.95.11 -> webpack-dev-server -> 浏览器

 

webpack-dev-server proxy代理

标签:col   指令   webpack   运行   本地   3.2   请求   ges   转发   

原文地址:https://www.cnblogs.com/hellohello/p/8157791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!