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

[Zink99]

面试前端岗

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

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

[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 配置