什么是“域”在互联网世界里“域”通常指的就是域名Domain Name。你可以把它理解为一个网站的“名字”或“门牌号”。因为互联网上的每台服务器都有一个由数字组成的IP地址如203.0.113.19这串数字很难记忆。所以人们发明了域名比如www.example.com让我们能通过一个好记的名字来访问网站。一个完整的域名是分层的从右到左级别依次降低。以shop.example.com为例顶级域 (TLD).com代表网站的类型如商业机构。二级域 (SLD)example这是网站所有者的核心名称。子域 (Subdomain)shop由所有者自行定义用于指向特定服务如商城。什么是“跨域”“跨域”是前端开发中一个非常核心的概念它源于浏览器的一项基本安全机制——同源策略Same-Origin Policy, SOP。同源策略为了保障用户安全浏览器规定一个网页中的脚本如JavaScript只能访问与当前页面“同源”的资源。“同源”的定义只有当两个页面的协议、域名、端口这三者完全一致时才被认为是“同源”。对比项协议域名端口同源要求必须相同必须相同必须相同只要有任何一项不同就会被浏览器判定为“跨域”并阻止脚本读取对方的数据如AJAX请求的响应、Cookie等。跨域示例假设当前页面是http://localhost:8080访问http://localhost:8080/api不跨域三者完全相同。访问https://localhost:8080/api跨域协议不同http vs https。访问http://api.example.com/api跨域域名不同。访问http://localhost:3000/api跨域端口不同。为什么需要跨域限制可以把它想象成一道“防火墙”。如果没有同源策略当你登录网银后一个恶意网站就能通过脚本悄悄读取你的网银页面信息盗取你的账户数据造成严重的安全风险。什么是“跨域资源共享”您提到的“跨原产资源共享”在专业术语中被称为跨域资源共享Cross-Origin Resource Sharing, CORS。它是目前解决跨域问题最主流、最标准的方案。CORS 是什么CORS 是一套浏览器和服务器共同遵守的“交通规则”。它允许服务器明确告诉浏览器“我信任并允许来自某个特定‘域’的网页访问我的资源。”CORS 是如何工作的整个过程由浏览器自动完成对开发者来说关键在于服务器的配置。前端发起请求当浏览器检测到脚本正在发起一个跨域请求时它会自动在请求头中添加一个Origin字段标明请求来自哪个源例如http://localhost:8080。服务器做出响应服务器收到请求后会检查Origin字段。如果允许该来源访问它会在响应头中添加一个Access-Control-Allow-Origin字段值就是被允许的源例如http://localhost:8080。浏览器放行浏览器收到响应后会检查响应头中是否包含允许自己源的Access-Control-Allow-Origin字段。如果匹配成功就将数据返回给前端脚本否则就会拦截响应并报错。两种类型的CORS请求浏览器会根据请求的复杂程度将其分为两类简单请求满足特定条件的请求如使用GET或POST方法且请求头是浏览器自动添加的。浏览器会直接发送请求等待服务器的“放行”指令。非简单请求不满足简单请求条件的请求如使用PUT或DELETE方法或包含自定义请求头。在发送正式请求前浏览器会先发送一个OPTIONS方法的“预检请求”Preflight Request询问服务器是否允许这次跨域操作。只有预检通过后才会发送真正的请求。为什么需要跨域请求这主要源于现代网站开发的两种主流模式1. 前后端分离开发这是最主要的原因。现在前端负责页面展示和后端负责数据处理通常是两个独立的团队甚至部署在完全不同的服务器上。场景前端页面部署在www.example.com而后端的API接口部署在api.example.com。问题如果不允许跨域前端页面就无法从自己的后端获取任何数据网站就变成了一个没有内容的空壳。作用跨域请求通过CORS等技术让www.example.com能够合法、安全地从api.example.com获取用户信息、商品列表等数据。2. 集成第三方服务现代网站很少“单打独斗”通常会集成各种强大的第三方服务来丰富功能。场景在你的博客里嵌入一个高德地图来显示位置。在电商网站使用支付宝或微信支付。使用GitHub或Google账号进行快捷登录。问题这些服务地图、支付、登录的代码和数据都存储在第三方的服务器上如map.amap.com,pay.alipay.com。作用跨域请求让你的网页能够调用这些外部服务的接口实现地图展示、支付跳转、身份验证等功能极大地丰富了用户体验。既然有用为什么浏览器还要阻止这正是浏览器的聪明之处它通过“默认阻止按需放行”的策略来保护你。阻止是为了安全防止恶意网站在后台悄悄获取你的隐私数据。例如防止一个钓鱼网站悄悄读取你已经登录的网银页面的信息。放行是为了功能当服务器明确配置了CORS规则告诉浏览器“我信任www.example.com这个来源”时浏览器就会放行。这保证了合法的业务需求能够被满足。说人话当一个网站需要调用另一个网站的服务并传递用户数据时浏览器会发起一个“跨域资源请求”来获取或发送这些数据。就是跨域资源请求那么问题来了怎么判断我的目标使用了跨域资源请求呢第一步打开开发者工具在 Chrome、Edge 或 Firefox 浏览器中按F12或Ctrl Shift I(Windows/Linux) /Cmd Opt I(Mac) 打开开发者工具。切换到Network网络面板。刷新页面或触发你想要分析的操作让请求显示在列表中。第二步识别跨域请求的三大特征在 Network 面板中你可以通过以下三个特征来迅速锁定并判断跨域请求特征 1看“预检”请求 (OPTIONS)这是最明显的特征。如果你在列表中看到一个OPTIONS方法的请求且紧随其后就是你实际的业务请求如POST或GET那么这绝对是一个复杂的跨域请求。现象列表中多了一个状态为200或204的OPTIONS请求。含义浏览器在正式发送数据前先“试探”了一下服务器询问是否允许跨域。特征 2看请求头 (Request Headers)点击具体的请求查看Request Headers请求标头寻找以下字段Origin这是跨域请求的“身份证”。如果请求头里包含Origin: http://localhost:3000假设这是你当前网页的地址说明浏览器明确告诉服务器“我是从这个地址来的请检查是否允许我访问”。同源请求通常不会带这个头或者带了也不重要。特征 3看响应头 (Response Headers)这是判断跨域是否成功的关键。点击请求查看Response Headers响应标头寻找以下字段Access-Control-Allow-Origin这是服务器的“通行证”。如果看到了这个字段例如值为*或http://localhost:3000说明服务器允许跨域。如果没看到这个字段但请求状态是 200浏览器依然会拦截数据并在控制台Console报错如Blocked by CORS policy。然后查看日志直接把这个获取到的东西输入进去恭喜你解决了这第一个学徒实验室