前端经典面试题 | 浏览器跨域

🖥️ 前端面试题 专栏：浏览器跨域
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、回答点

        CORS Nginx反向代理 同源策略

二、深入回答

为什么有跨域问题

判断是否为跨域

跨域的解决方案

实现方式

---

一、回答点

        CORS Nginx反向代理 同源策略

        跨域的问题源自于浏览器为了请求的安全,从而引入的基于 同源策略的安全特性.当页面和请求的协议、主机名或域名不同时,浏览器会判定两者不为同源,即为跨域请求.(跨域只是浏览器限制,服务端无影响.当产生跨域时,我们可以通过CORS JSONP Nginx反向代理 等方式解决)

二、深入回答

为什么有跨域问题

       跨域问题是浏览器对于请求的⼀种安全限制：⼀个⻚⾯发起的ajax请求，只能是于当前⻚同域名的 路径，这能有效的阻⽌跨站攻击。 因此：跨域问题 是针对发送请求的⼀种限制。 但是这却给我们的开发带来了不便.

判断是否为跨域

        如上图:一个origin由协议(https:)、主机名(csdn)、端口(默认8080)组成 上图没有端口号,只有当 协议 主机名 端口都相同时 才会判定都是同源关系,如不符合即为跨域.

跨域的解决方案

        工作当中遇到最多的方案为 CORS 跟 Nginx反向代理

        Nginx反向代理:

                利用nginx反向代理把跨域改为不跨域,支持各种请求方式

                缺点:需要对nginx进行额外的配置

        CORS规范化跨域请求:

                优点:在服务端进行控制是否允许跨域,可以自定义规则 支持各种请求方式

                缺点:CORS需要IE10以上

实现方式

        反向代理:

                在页面同域下配置一套反向代理服务,页面请求同域的服务端,服务端请求上游的实际的服务端,然后将结果返回给前端.

        CORS:

                CORS 将请求分为简单请求和需预检请求

        简单请求:不会触发预检请求的称为简单请求。

        预检请求:当一个请求不满足以上简单请求的条件时,浏览器会自动向服务端发送一个 OPTIONS 请求,通过服务端返回的 Access-Control-Allow * 判定请求是否被允许