Web前端最全webpack 配置 changeOrigin 无效的说明，【推荐】

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

以下这段关于 changeOrigin 配置属性说明的话来自官网：DevServer | webpack

The origin of the host header is kept when proxying by default, you can set changeOrigin to true to override this behaviour. It is useful in some cases like using name-based virtual hosted sites.

上面这句话是说：当进行代理时，Host 头部的源默认会保持原状；你可以设置 changeOrigin 为 true 来覆盖这种行为。

注意：changeOrigin 属性名字具有误导性，它并不是表示修改 Origin 头部，而是表示修改 Host 头部的 Origin（原始值）。从上面官网的那句话中 the origin of the host 也可以理解出来。

Host 头部的作用是标识你请求哪一个主机（具体到主机名和端口），主机名可以供一些多站点服务器（Apache、Nginx）进行请求派发。请求关于 Host 头部的作用具体可以参考 Host - HTTP | MDN 或者更多详细资料。

假设，如果你的前端服务器是 http://localhost:3000，后端是 http://localhost:8082。

那么后端通过 request.getHeader(“Host”) 获取依旧是 http://localhost:3000。

如果你设置了 changeOrigin: true，那么后端通过 request.getHeader(“Host”) 获取才是 http://localhost:8082。代理服务器此时会根据请求的 target 地址修改 Host。

changeOrigin 的配置主要体现在 proxy 代理设置上，一般会这样设置：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
#### 后话

-------------------------------------------------------------

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

对于面试，说几句个人观点。



面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。