webpack-dev-server代理的问题

   webpack是这样配置的
 devServer: {
     historyApiFallback: true,
     noInfo: true,
     proxy: {
         '/menu': {
             target: 'https://other-server.example.com',
             secure: false
         }
     }
      //但是我用以下代码发起请求,通过Network查看请求地址还是http://xx.com/menu没有变,如何才能变为https://other-server.example.com/menu 
              $.ajax({
            url:"http://xx.com/menu",
            ...
      
不知是我哪里理解有误,求指教?
    还有一个问题就是webpack-dev-server是如何实现代理的?
    是否是以下的一种
    1.本地发起请求时,webpack-dev-sever将请求转发给webpack配置的的代理服务器,然后代理服务器再去发起请求,最后由代理服务器接收数据再进行数据返回
    2.本地发起请求时,由webpack-dev-server直接向配置的地址发起请求例如上面http://xx.com/menu -》https://other-server.example.com/menu。 
阅读 9.1k
5 个回答

谢邀,没有研究过 webpack-dev-server 的代理,不过按照对 vue-cli 使用 webpack 项目模板创建项目的了解,设置代理之后,前端发起的请求还是指向当前服务器的,因此 network 里看到的地址是没有问题的。

在 vue-cli 生成的项目中设置代理的目的,是方便在未与后端集成的时候进行后台 api 调用,同时避免跨域问题。

想必 webpack-dev-server 设置代理的目的也一样。

@july_L[july_L] 的回答中,proxy 设置的参数格式和你的不太一样,你是不是误将 vue-cli 使用 webpack 项目模板创建项目的代理设置参数格式用在这里了。

PS: 刚发现前面 July_L 是自问自答,那这里就当说明一下代理设置目的吧。

console没有报错吗?

原请求是http协议,目标地址是https

devServer: {
   historyApiFallback: true,
   hot: true,
   noInfo: false,
   proxy: [
     {
         context:['/city/list','/food],
         target:"http://api.com",
         changeOrigin: true,
         secure: false
     }
   ]
 }

context中是 需要代理的接口, 都会代理到 http://api.com下面 例如http://api.com/food

新手上路,请多包涵

$ajax({

url: '/menu',
...

})
感觉这样子应该就ok了, 更多代理的配置项可以看看webpack这部分的官方文档
https://webpack.js.org/config...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题