请教一个今天面试中出现的问题

[Zink99]

面试前端岗

面试过程中问到了跨域的问题，我讲了几种解决方案，然后说到了 Proxy ，面试官让我讲讲 webpack 怎么做 Proxy ，我说我不知道怎么配，没有实操过，然后补充了 Proxy 的思路，不过他貌似并不买账。

想问下现在卷到连 webpack 的配置都需要背了吗？

[4ark]

那你说说 proxy 思考，会不会是对你这个回答不买账？

[binux]

webpack 怎么做 Proxy?

[bigbyto]

MDN 上对跨域的叙述非常清楚，可以去看看。说实话，每次团队的人遇到跨域问题不知道怎么解决都会让我感到非常恼火，这问题前后端开发都是需要完全理解的。

[Hieast]

所以几种解决方案是什么？我挺好奇怎么聊到 proxy 的？

[gulugulu233]

webpack devServer proxy ，本质上是正向代理，就是你本地起个 node 服务，用这个服务去调接口，问这个的确没啥意义。你是不是扯到 js 里的 Proxy 了

[mxT52CRuqR6o5]

@gulugulu233 webpack dev server 是反向代理啊，像 socks5 这种是正向代理

[gulugulu233]

@mxT52CRuqR6o5 是的…正向反向名词我容易搞混

[vision1900]

话说真的有人用 JSONP 吗？怎么看都是蹩脚的 hack 。要是问我，我只会回一种：服务器设置相应的返回头。因未 CORS 的初衷就是在服务器没有允许的情况下，浏览器不允许跨域名获取资源。至于 Nginx 之类的反向代理，本身没有解决 CORS 问题，而是完全避开了 CORS 。

真的想看一个人对跨域有多少理解，问具体做法不如问更大的问题，比如你觉得 CORS 的设计合理吗？既然有 Nginx 反向代理的机制可以绕过 CORS 限制，那 CORS 意义何在？

推荐阅读: https://stackoverflow.com/questions/29167428/same-origin-policy-and-cors-whats-the-point

[ericls]

Webpack 跟 proxy 有啥关系？

[murmur]

webpack 本身就是开发者模式，不就是给 dev-server 配 proxy 么

[volCan0]

这也不算卷吧，常规问题啊

[musi]

这很正常吧，实际开发中跨域很常见啊。webpack 的 proxy 不就是给 devServer 加个 proxy 的配置么，如果真不会配你和面试官说你手写一个 proxy-server 那也不是不行哇

[daimon1]

我也是面试官，不过我不会问这么 sd 的问题。因为 devServer.proxy 这个东西，无论哪个主流技术栈的前端项目一定会有，很简单几行的一个配置。如果候选人说不知道怎么配，确实容易让人联想到不好的东西

[cxe2v]

不用请教这个问题，面试官问的有问题，开发过程中的 devServer 反代，加了一项配置而已，根本没什么意义的问题

[supuwoerc]

proxy 是 node 服务器的配置吧，前端开发环境跨域是利用 node 做接口转发来解决跨域的。

[ryncv]

这种问题属于面试官不该问，但是你不应该不知道的的类型

[yangxiaopeipei]

话说跨域 不是后端兼容就好吗

[ALVC666]

我感觉面试官想表达的是上生产服务之后 webpack 没法做 proxy 吧
只是单纯 build 产物而已而已。

[a62527776a]

跨域问题啊 本质上是考察对 HTTP 请求头的理解

[JerryY]

不是问到不会的地方就是卷。
我参与过的项目中，只要用到 webpack 的，肯定是有这一项配置的，再熟悉不过的。问这个可能是试探你的项目经历之类的，有没有真正的上手配过或者去研究过 webpack 配置，说到底还是针对项目的一些提问。

像问 css 属性的才叫 sd 问题，我就遇到过。。。

[cydysm]

以前我也会回答 webpack
但实际上 webpack 的 proxy 只适用于在开发 所以这个回答可能偏了

[GeruzoniAnsasu]

如果是你先提到有 webpack proxy 这种方式然后追问的，那我觉得不冤，如果是在说

「本质上有代理 /浏览器 /HTTP 规范三种方式」然后让你把所有代理配置方式都说一遍，那我觉得很傻逼

[h1104350235]

webapck 是本地跑一个 Node 服务，服务与服务器之间不存在跨域问题吧

[leitao]

@mxT52CRuqR6o5 是正向代理吧

[yhxx]

所以说你们还是 too young ，面试顺着他来就是了，猜他想要什么样的答案，并给他更多惊喜。

『我在刚工作的时候，用过 JSONP 来解决，但是由于有 xxx 缺陷，后面一般都使用 CORS 的方案了，当时还单独处理过 XDomainRequest 』（什么是资深啊，战术后仰）

CORS 方案我们需要注意 Origin 、Headers 、Methods 等的配置，再扯一堆非简单请求 options 之类的 balabala

如果觉得对面对 HTTP 还有点 了解，可以继续 Max Age 甚至 HTTP 缓存之类的扯下去。

扯远了，扯回来

『我在一个 xx 项目中，还曾经用过 iframe 的方案，在那个项目中涉及到了跨域通信的部分，我们使用了 PostMessage 来解决，当然这种方案也有诸多缺陷，目前我们在微前端方向已经有了一些新的探索 balabala 』

『回到跨域，我还曾经遇到过 xxx 问题，比如 a.taobao.com 和 b.taobao.com 之间需要登录 /cookie 之类的随便扯，我们使用了 document.domain/window.name/location.hash 的方案来进行 hack ，这种方案不成熟之处在于 xxx ，我们后续做了 xxx 改进』

『日常的本地开发中，我们通常使用反向代理来解决这个问题，在团队内部，我们封装了 webpack 和 vite 的通用工作台，抹平 xxx 差异，让开发者可以更专注于业务。同样的，反向代理在 nginx 中也很实用，我们也基于这点来做了 xxx ，部署 xxx ，域名 xxx 』

『我自己的日常开发中，对于能够确保安全的环境，我通常打开 chrome 的 --disable-web-security 功能，一劳永逸。』

顺便再扯一点 Web 安全、canary 版本、chrome 新特性之类的，一场面试的时间差不多耗完了吧，他还有时间给你整算法题？

对了还有个 Websocket ，也看情况插进去好了

[yhxx]

@ALVC666
我感觉面试官想表达的是上生产服务之后 webpack 没法做 proxy 吧

--------

我真的见过在生产环境用 webpack-dev-server 起服务然后用 nginx 代理 dev-server 的端口的操作。。。令人智息

[iyaozhen]

@bigbyto +1

说到跨域，前端后端能吵一个下午，就没人能花一小时看看文档，而且 MDN 上的那文档说的不能再清楚了

[libook]

没明白为什么讲 Proxy 就涉及到 Webpack 了，通常都是用 Webpack 打包之后把 dist 扔线上，这时候就没有 Webpack 什么事情了。

跨域我在做面试官的时候也会问，只不过我提问的重点主要是：
1. 跨域限制是用于保护前端还是用于保护后端的？
2. 跨域限制用于防范哪些问题？
3. 如何正确配置跨域规则？

[baishi732]

借楼问下，经验尚浅从没自己做过跨域相关操作，面试要是问起来怎么答？

[zoharSoul]

@yhxx #25 面试专家 offer 收割机

[aleen42]

webpack 我還貢獻了 HttpUrlPlugin 的 proxy 實現支持綠色上網，請問面試官是說的 webpack 哪個 proxy?

[yhxx]

@yhxx 对了忘了一个，图片也能跨域
可以顺便再扯一下埋点平台的建设

[clarence5]

@yhxx 简直是跨域(面试)模板

[a852695]

开发环境启个 Node 后台充当了 proxy
正式 Prod 环境应该是不能的，只能走 nginx 配置