V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Zink99
V2EX  ›  职场话题

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

  •  
  •   Zink99 · 98 天前 · 4557 次点击
    这是一个创建于 98 天前的主题,其中的信息可能已经有所发展或是发生改变。

    面试前端岗

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

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

    34 条回复    2022-03-26 22:56:11 +08:00
    4ark
        1
    4ark  
       98 天前 via iPhone
    那你说说 proxy 思考,会不会是对你这个回答不买账?
    binux
        2
    binux  
       98 天前 via Android   ❤️ 1
    webpack 怎么做 Proxy?
    bigbyto
        3
    bigbyto  
       98 天前 via iPhone   ❤️ 1
    MDN 上对跨域的叙述非常清楚,可以去看看。说实话,每次团队的人遇到跨域问题不知道怎么解决都会让我感到非常恼火,这问题前后端开发都是需要完全理解的。
    Hieast
        4
    Hieast  
       98 天前
    所以几种解决方案是什么?我挺好奇怎么聊到 proxy 的?
    gulugulu233
        5
    gulugulu233  
       98 天前
    webpack devServer proxy ,本质上是正向代理,就是你本地起个 node 服务,用这个服务去调接口,问这个的确没啥意义。你是不是扯到 js 里的 Proxy 了
    mxT52CRuqR6o5
        6
    mxT52CRuqR6o5  
       98 天前 via Android
    @gulugulu233 webpack dev server 是反向代理啊,像 socks5 这种是正向代理
    gulugulu233
        7
    gulugulu233  
       98 天前 via Android
    @mxT52CRuqR6o5 是的…正向反向名词我容易搞混
    vision1900
        8
    vision1900  
       98 天前   ❤️ 6
    话说真的有人用 JSONP 吗?怎么看都是蹩脚的 hack 。要是问我,我只会回一种:服务器设置相应的返回头。因未 CORS 的初衷就是在服务器没有允许的情况下,浏览器不允许跨域名获取资源。至于 Nginx 之类的反向代理,本身没有解决 CORS 问题,而是完全避开了 CORS 。

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

    推荐阅读: https://stackoverflow.com/questions/29167428/same-origin-policy-and-cors-whats-the-point
    ericls
        9
    ericls  
       98 天前 via iPhone
    Webpack 跟 proxy 有啥关系?
    murmur
        10
    murmur  
       98 天前
    webpack 本身就是开发者模式,不就是给 dev-server 配 proxy 么
    volCan0
        11
    volCan0  
       98 天前
    这也不算卷吧,常规问题啊
    musi
        12
    musi  
       98 天前
    这很正常吧,实际开发中跨域很常见啊。webpack 的 proxy 不就是给 devServer 加个 proxy 的配置么,如果真不会配你和面试官说你手写一个 proxy-server 那也不是不行哇
    daimon1
        13
    daimon1  
       98 天前
    我也是面试官,不过我不会问这么 sd 的问题。因为 devServer.proxy 这个东西,无论哪个主流技术栈的前端项目一定会有,很简单几行的一个配置。如果候选人说不知道怎么配,确实容易让人联想到不好的东西
    cxe2v
        14
    cxe2v  
       98 天前
    不用请教这个问题,面试官问的有问题,开发过程中的 devServer 反代,加了一项配置而已,根本没什么意义的问题
    supuwoerc
        15
    supuwoerc  
       98 天前
    proxy 是 node 服务器的配置吧,前端开发环境跨域是利用 node 做接口转发来解决跨域的。
    ryncv
        16
    ryncv  
       98 天前   ❤️ 1
    这种问题属于面试官不该问,但是你不应该不知道的的类型
    yangxiaopeipei
        17
    yangxiaopeipei  
       98 天前
    话说跨域 不是后端兼容就好吗
    ALVC666
        18
    ALVC666  
       98 天前
    我感觉面试官想表达的是上生产服务之后 webpack 没法做 proxy 吧
    只是单纯 build 产物而已而已。
    a62527776a
        19
    a62527776a  
       98 天前
    跨域问题啊 本质上是考察对 HTTP 请求头的理解
    JerryY
        20
    JerryY  
       98 天前
    不是问到不会的地方就是卷。
    我参与过的项目中,只要用到 webpack 的,肯定是有这一项配置的,再熟悉不过的。问这个可能是试探你的项目经历之类的,有没有真正的上手配过或者去研究过 webpack 配置,说到底还是针对项目的一些提问。

    像问 css 属性的才叫 sd 问题,我就遇到过。。。
    cydysm
        21
    cydysm  
       98 天前
    以前我也会回答 webpack
    但实际上 webpack 的 proxy 只适用于在开发 所以这个回答可能偏了
    GeruzoniAnsasu
        22
    GeruzoniAnsasu  
       98 天前
    如果是你先提到有 webpack proxy 这种方式然后追问的,那我觉得不冤,如果是在说

    「本质上有代理 /浏览器 /HTTP 规范三种方式」然后让你把所有代理配置方式都说一遍,那我觉得很傻逼
    h1104350235
        23
    h1104350235  
       98 天前
    webapck 是本地跑一个 Node 服务,服务与服务器之间不存在跨域问题吧
    leitao
        24
    leitao  
       98 天前 via Android
    @mxT52CRuqR6o5 是正向代理吧
    yhxx
        25
    yhxx  
       98 天前   ❤️ 4
    所以说你们还是 too young ,面试顺着他来就是了,猜他想要什么样的答案,并给他更多惊喜。

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

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

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

    扯远了,扯回来

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

    『回到跨域,我还曾经遇到过 xxx 问题,比如 a.taobao.comb.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
        26
    yhxx  
       98 天前
    @ALVC666
    我感觉面试官想表达的是上生产服务之后 webpack 没法做 proxy 吧

    --------

    我真的见过在生产环境用 webpack-dev-server 起服务然后用 nginx 代理 dev-server 的端口的操作。。。令人智息
    iyaozhen
        27
    iyaozhen  
       98 天前
    @bigbyto +1

    说到跨域,前端后端能吵一个下午,就没人能花一小时看看文档,而且 MDN 上的那文档说的不能再清楚了
    libook
        28
    libook  
       98 天前
    没明白为什么讲 Proxy 就涉及到 Webpack 了,通常都是用 Webpack 打包之后把 dist 扔线上,这时候就没有 Webpack 什么事情了。

    跨域我在做面试官的时候也会问,只不过我提问的重点主要是:
    1. 跨域限制是用于保护前端还是用于保护后端的?
    2. 跨域限制用于防范哪些问题?
    3. 如何正确配置跨域规则?
    baishi732
        29
    baishi732  
       98 天前
    借楼问下,经验尚浅从没自己做过跨域相关操作,面试要是问起来怎么答?
    zoharSoul
        30
    zoharSoul  
       98 天前   ❤️ 1
    @yhxx #25 面试专家 offer 收割机
    aleen42
        31
    aleen42  
       97 天前 via Android
    webpack 我還貢獻了 HttpUrlPlugin 的 proxy 實現支持綠色上網,請問面試官是說的 webpack 哪個 proxy?
    yhxx
        32
    yhxx  
       97 天前
    @yhxx 对了忘了一个,图片也能跨域
    可以顺便再扯一下埋点平台的建设
    clarence5
        33
    clarence5  
       97 天前   ❤️ 1
    @yhxx 简直是跨域(面试)模板
    a852695
        34
    a852695  
       97 天前
    开发环境启个 Node 后台充当了 proxy
    正式 Prod 环境应该是不能的,只能走 nginx 配置
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1918 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 16:43 · PVG 00:43 · LAX 09:43 · JFK 12:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.