面试题答案
一键面试跨域产生的原因
跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，同源策略是浏览器的一个安全功能，限制从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这里的同源要求协议、域名、端口都相同，当其中任意一项不同时，就会产生跨域问题。
常见跨域解决方案
- CORS（跨域资源共享）
- 原理：CORS 是一种基于 HTTP 头的机制，通过服务器增加特定的响应头来告诉浏览器，允许跨域请求。例如，服务器通过设置
Access - Control - Allow - Origin头，指定允许访问的源。简单请求（如GET、POST且Content-Type为application/x-www-form-urlencoded、multipart/form-data、text/plain）浏览器会直接发送请求，非简单请求（如PUT、DELETE，或Content-Type为application/json等）浏览器会先发送预检请求（OPTIONS），服务器确认允许后才发送实际请求。 - 适用场景：适用于现代浏览器环境下的各种前后端交互场景，无论是简单请求还是复杂请求。
- 安全风险：如果配置不当，比如
Access - Control - Allow - Origin设置为*，可能会导致恶意网站利用该接口进行攻击。 - 应对措施：不要设置
Access - Control - Allow - Origin为*，应根据实际需求设置具体的允许源。对预检请求进行必要的权限验证，防止非法请求。
- 原理：CORS 是一种基于 HTTP 头的机制，通过服务器增加特定的响应头来告诉浏览器，允许跨域请求。例如，服务器通过设置
- JSONP（JSON with Padding）
- 原理：利用
<script>标签没有跨域限制的特性。通过动态创建<script>标签，将请求数据放在查询字符串中，服务器返回包裹在指定回调函数中的 JSON 数据，浏览器收到后执行回调函数从而获取数据。 - 适用场景：主要用于请求第三方数据，比如调用一些开放 API，且只适用于 GET 请求。
- 安全风险：如果回调函数名被恶意篡改，可能导致 XSS 攻击，恶意代码可以通过注入的方式执行。
- 应对措施：对回调函数名进行严格验证和过滤，确保回调函数名是安全可控的。不使用用户提供的回调函数名，而是服务器端生成随机且安全的回调函数名。
- 原理：利用
- 代理服务器
- 原理：前后端分离项目中，前端将跨域请求发送到自己的服务器，自己的服务器再转发请求到目标服务器，获取响应后再返回给前端。因为是同域请求，所以不存在跨域问题。
- 适用场景：适用于各种复杂的跨域场景，尤其是需要对请求和响应进行额外处理（如鉴权、数据格式转换等）的情况。
- 安全风险：代理服务器可能成为攻击目标，如果代理服务器被攻陷，攻击者可以获取前端发送的所有请求数据。
- 应对措施：对代理服务器进行严格的安全配置，如防火墙设置、身份验证、访问控制等。对请求和响应数据进行加密传输，防止数据在传输过程中被窃取。
- postMessage
- 原理：HTML5 新特性，用于解决窗口间跨域通信问题。比如在一个页面中通过
window.postMessage(data, targetOrigin)方法向另一个窗口发送数据，另一个窗口通过监听message事件来接收数据window.addEventListener('message', function(event) { /* 处理数据 */ });，其中targetOrigin可以设置为*或指定源。 - 适用场景：适用于父子窗口、嵌套 iframe 等场景下的跨域通信。
- 安全风险：如果
targetOrigin设置为*，可能会收到来自任何源的消息，恶意网站可能会向目标窗口发送伪造消息。 - 应对措施：尽量指定明确的
targetOrigin，避免设置为*。对接收到的消息进行合法性验证，确保数据来源可靠。
- 原理：HTML5 新特性，用于解决窗口间跨域通信问题。比如在一个页面中通过