同源策略与跨域解决方案

Tue, 04 Mar 2025 09:31:00 +0000

考察点分析

该题目主要考察以下核心能力维度：

浏览器安全机制理解：同源策略的设计目标与具体限制维度
跨域方案技术选型：对比不同解决方案的底层原理与适用场景
安全防护意识：分析各方案的安全边界与风险点
工程实践能力：根据业务场景选择最佳跨域方案

具体技术评估点：

同源策略的三要素判定（协议/域名/端口）
CORS预检请求触发条件与流程控制
JSONP的脚本注入风险与防御措施
反向代理方案的服务器架构影响
凭证模式的CORS配置注意事项

技术解析

关键知识点

CORS > 反向代理 > JSONP > 同源策略

原理剖析

同源策略：浏览器安全基座，限制跨源资源交互。影响XMLHttpRequest、Fetch API、Web Fonts、Web Workers等
- 跨域写（Cross-origin writes）：默认允许（如表单提交）
- 跨域资源嵌入（Cross-origin embedding）：需MIME类型校验
- 跨域读（Cross-origin reads）：默认禁止
CORS：
- 简单请求：满足特定条件（GET/POST/HEAD，Content-Type为text/plain等）
- 预检请求：非简单请求先发OPTIONS验证（复杂请求特征检测）
```
 Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: X-Custom-Header
 
```

JSONP：利用<script>标签不受同源限制的特性

 function handleResponse(data) {
 console.log('Received:', data);
}
const script = document.createElement('script');
script.src = 'http://external.com/data?callback=handleResponse';
document.body.appendChild(script);

反向代理：服务端中转实现同源访问

 location /api/ {
 proxy_pass http://backend-server:8080/;
 proxy_set_header Host $host;
}

安全性差异对比

方案	安全风险	防御措施
CORS	配置错误导致CSRF	严格设置allow-origin
JSONP	XSS攻击、回调劫持	输入过滤+随机回调名
反向代理	增加攻击面	代理层请求过滤

问题解答

浏览器同源策略通过协议/域名/端口三要素校验阻止跨域资源访问，主要限制AJAX请求、DOM访问和存储隔离。CORS通过服务端响应头实现跨域授权，需区分简单请求（直接发送）与预检请求（OPTIONS预检）。JSONP利用脚本标签跨域特性但存在XSS风险，反向代理通过服务端中转隐藏跨域。withCredentials凭证模式应在前端需携带Cookies/HTTP认证且服务端配置Access-Control-Allow-Credentials: true时使用，同时需避免使用通配符(*)配置origin。

预检请求触发条件与优化

Tue, 04 Mar 2025 09:31:00 +0000

考察点分析

核心能力维度：跨域请求机制理解、HTTP协议规范掌握、性能优化实践能力
技术评估点：

区分简单请求与预检请求的触发条件
掌握CORS预检缓存机制及优化手段
准确记忆简单请求的3个严格限制条件
理解浏览器安全策略与性能优化的平衡

技术解析

关键知识点

CORS预检机制 > 简单请求判定条件 > Access-Control-Max-Age优化

原理剖析

浏览器执行跨域请求时，根据请求特征决定是否触发预检（Preflight）：

非简单请求会触发OPTIONS预检，包括：
- 使用PUT/DELETE/PATCH方法
- 包含自定义请求头（如Authorization）
- Content-Type非以下值：
  text/plain multipart/form-data application/x-www-form-urlencoded
Access-Control-Max-Age响应头设置缓存时间（秒），使浏览器在有效期内复用预检结果，减少OPTIONS请求次数。该值过大会导致策略更新延迟，建议设置为合理时间（如2小时=7200）。
简单请求必须同时满足：
- 方法为GET/HEAD/POST
- 仅包含以下头：
  Accept Accept-Language Content-Language Content-Type
- Content-Type为上述三个允许值

常见误区

误认为所有POST请求都是简单请求
忽略Content-Type中字符编码的影响（如application/json;charset=UTF-8仍会触发预检）
混淆预检缓存与实际请求缓存机制

问题解答

触发OPTIONS的条件：

使用PUT/DELETE/PATCH方法
包含自定义请求头
Content-Type非标准值（如application/json）

Access-Control-Max-Age优化：
设置响应头Access-Control-Max-Age: 7200，使2小时内同源请求跳过预检阶段。需注意服务端配置变更时客户端缓存未过期导致的策略失效问题。

简单请求条件：

方法限制：GET/HEAD/POST
头部限制：仅允许标准头集合
Content-Type限制：特定MIME类型且无额外参数

解决方案

 // 后端CORS配置示例（Node.js）
const express = require('express');
const app = express();

// 处理预检请求
app.options('/api', (req, res) => {
 res.header('Access-Control-Allow-Origin', '*')
 .header('Access-Control-Allow-Methods', 'GET,POST,PUT')
 .header('Access-Control-Allow-Headers', 'Content-Type,Authorization')
 .header('Access-Control-Max-Age', 7200) // 2小时缓存
 .send();
});

// 处理实际请求
app.post('/api', (req, res) => {
 res.header('Access-Control-Allow-Origin', '*').json({ data: 'ok' });
});

复杂度优化：

跨域请求 on ZiYang FrontEnd Interview

同源策略与跨域解决方案

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

安全性差异对比 link

问题解答 link

预检请求触发条件与优化

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

考察点分析

技术解析

关键知识点

原理剖析

安全性差异对比

问题解答

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

解决方案