浏览器跨域

1.1 跨域

1.1.1 什么是跨域

跨域是浏览器基于同源策略（Same-Origin Policy）实施的安全限制机制，需同时满足以下三个条件才会触发：

• 运行环境：发生在浏览器环境中
• 请求类型：涉及向后端接口发起的请求
• 策略触发：违反了同源策略规则

同源策略要求（三者必须完全相同）：

• 协议（http/https）
• 域名（包括子域名）
• 端口号

只要任一条件不满足，浏览器就会触发跨域限制。

1.1.2 解决跨域的方法

• 后端配置CORS
  通过设置响应头（如Access-Control-Allow-Origin）允许特定源访问。
• 本地开发代理（Proxy）
  利用开发服务器（如webpack/vite）的代理功能转发请求。
• JSONP
  通过动态script标签绕过限制（仅限GET请求）。

1.1.3 服务端请求服务端会跨域么

跨域是浏览器的安全策略，服务端之间的通信（如Node.js发起HTTP请求）不受同源策略限制。

1.1.4 webpack或者vite中可以使用proxy解决跨域，它解决跨域的原理是什么

原理：在本地开发时，代理服务器充当中间人：

1. 浏览器 → 请求发送到本地代理服务器（同源，避免跨域）。
2. 代理服务器 → 转发请求到目标后端服务器（服务端无跨域限制）。
3. 结果通过代理返回给浏览器。

本质：通过隐藏真实后端地址，绕过浏览器的同源策略。

1.1.5 为什么跨域的时候有时候请求会发两次

对于非简单请求（如带自定义头或非标准Content-Type），浏览器会先发送一次OPTIONS方法的预检请求（Preflight Request），确认服务器允许实际请求后，才会发送真实请求。

1.1.6 为什么非要有这个预检请求

核心目的：安全性保障。

• 权限确认：确保服务器明确允许跨域请求的特定方法、头部和字段。
• 减少风险：避免恶意脚本直接发送非常规请求（如PUT/DELETE）。

类比：类似于访问权限门禁，先验证身份（预检），再放行正式操作。

1.1.7 总结

跨域是浏览器出于安全考虑（同源策略）对非同源请求（协议、域名、端口任一不同）的限制，常见解决方案包括后端配置CORS、开发服务器代理（如webpack/vite的proxy）或JSONP。服务端间通信无跨域问题，而浏览器中非简单请求（如带自定义头）会先发OPTIONS预检请求，以确认服务器允许实际请求，确保安全性。代理的原理是通过本地同源服务器转发请求，绕过浏览器限制。