浏览器跨域与同源策略

浏览器跨域与同源策略

• 🔒 跨域问题源于浏览器的同源策略，目的是保障用户安全，脱离浏览器环境（如服务器间通信）不存在跨域
• 🌐 “同源”指两个 URL 的协议、域名、端口完全相同，路径不同不影响同源判断
• ⚠️ 跨域请求仍会被发送至服务器并获得响应，但浏览器在校验响应头后若不通过（如缺少 CORS 头），会阻止 JS 获取数据，从而报错
• 🛠️ CORS 是官方推荐方案，核心是服务器通过设置 Access-Control-Allow-Origin 等响应头表明允许哪些源访问；简单请求与预检请求（OPTIONS）处理方式不同。
• 🔄 代理服务器方案适用于无法修改目标服务器的情况（如调用第三方 API），前端请求自己的代理服务，由其转发并返回数据，从而规避浏览器跨域限制。

术语解释

• 同源策略（Same-Origin Policy）:
  • 浏览器的安全机制，限制一个源的文档或脚本如何与另一个源的资源进行交互，仅允许同源（协议+域名+端口一致）请求自由访问。
• CORS（Cross-Origin Resource Sharing）:
  • 一种基于 HTTP 头的机制，允许服务器声明哪些外部源可以访问其资源，是解决跨域问题的标准方案。
• 预检请求（Preflight Request）:
  • 在 CORS 中，对于非简单请求（如带自定义头或 Content-Type 为 application/json 的 POST），浏览器会先发送 OPTIONS 方法的请求询问服务器是否允许实际请求。
• JSONP（JSON with Padding）:
  • 利用
    <script> 标签不受同源策略限制的特性，通过动态创建 script 发起 GET 请求，服务器返回调用指定回调函数的 JS 代码以传递数据。
• 代理服务器（Proxy Server）:
  • 位于客户端与目标服务器之间的中间服务，客户端请求代理，代理再向目标服务器获取数据并返回，使浏览器视角下请求为同源，从而绕过跨域限制。

Q: 在浏览器同源策略中，什么因素定义了“同源”？

A: 协议、域名和端口三者必须完全一致。路径的不同不影响同源判断。

Q: 浏览器同源策略的主要目的是什么？

A: 同源策略是浏览器的一项安全机制，旨在限制一个源的文档或脚本如何与另一个源的资源进行交互，从而保护用户安全。

Q: 当发起一个跨域AJAX请求时，服务器是否会收到请求并发送响应？如果会，为什么前端仍然会报告跨域错误？

A: 是的，服务器会收到请求并发送响应。

但浏览器在接收到响应后会进行安全校验（例如检查CORS头），如果校验不通过，浏览器会阻止JavaScript访问响应数据，从而导致前端报告跨域错误。

Q: 什么是CORS？在解决跨域问题时，服务器在CORS机制中扮演了什么主要角色？

A: CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种基于HTTP头的机制，允许服务器声明哪些外部源可以访问其资源。

服务器的主要责任是通过设置响应头（如Access-Control-Allow-Origin）来明确允许特定源的跨域请求。

Q: CORS请求中的“简单请求”和“预检请求”有何区别？

A: 简单请求满足特定条件（GET/HEAD/POST方法之一，特定Content-Type，无自定义头），浏览器会直接发送。

预检请求（OPTIONS方法）则在实际请求前发送，用于询问服务器是否允许实际请求，适用于不满足简单请求条件的复杂请求。

Q: JSONP如何利用其机制绕过同源策略？它有哪些主要局限性？

A: JSONP利用了<script>标签不受同源策略限制的特性。

客户端动态创建<script>标签，将目标URL作为src，并在URL中附带回调函数名。服务器返回调用该回调函数并将数据作为参数的JS代码。

其主要局限是仅支持GET请求，且要求服务器返回特定格式的JS代码。

Q: 何时优先选择代理服务器方案解决跨域问题？它的工作原理是什么？

A: 当目标服务器无法修改（如调用第三方API）时，代理服务器是首选方案。

其工作原理是：前端向自己的代理服务器发起同源请求，代理服务器再将请求转发给目标服务器（服务器间通信不受同源策略限制），

获取数据后，再将数据返回给前端。

sequenceDiagramparticipant Client as 前端participant Proxy as 代理服务器participant API as 第三方API服务器Client->>Proxy: 发起请求Proxy->>API: 转发请求API-->>Proxy: 返回数据Proxy-->>Client: 返回数据给前端

Q: 服务器到服务器之间的通信是否存在跨域限制？为什么？

A: 不存在。同源策略是浏览器为了保护用户安全而实施的机制，服务器之间的通信脱离了浏览器环境，因此不受同源策略的限制。

Q: 请简述在CORS、JSONP和代理服务器之间选择跨域解决方案的决策流程。

A: 首先判断能否修改目标服务器。若不能，则只能使用代理服务器。若能修改，则优先考虑CORS（标准方案）。

若CORS因兼容性或其他原因不可行，可考虑JSONP（仅支持GET，目前较少使用）。

Q: 在开发环境中，前端开发服务器（如localhost:8080）需要访问部署在api.example.com的API时，如果遇到跨域错误，通常如何解决？

A: 通常通过配置前端开发服务器的代理功能来解决。

例如，在webpack-dev-server或Vite中设置代理，将localhost:8080/api的请求转发到api.example.com，从而绕过浏览器的同源策略限制。

为什么跨域请求服务器能收到，但前端拿不到响应？

• 因为浏览器在收到跨域响应后会进行安全校验（如检查 CORS 头），若未通过则阻止 JS 访问响应内容，但请求本身已正常发送并被服务器处理。

JSONP 和 CORS 各有什么局限性？

• JSONP 仅支持 GET 请求，且要求服务器返回可执行的 JS 函数调用代码；CORS 需要服务器配置响应头，若目标服务器非己方控制（如第三方 API）则无法使用。