webpack-dev-server代理的问题

Question

   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。 

Answer 1

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

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

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

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

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

Answer 2

console没有报错吗？

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

Answer 3

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

Answer 4

$ajax({

url: '/menu',
...

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

Answer 5

请问你解决这个问题了吗？能说明下吗？