HTML标签本身不受同源策略限制，限制在于JavaScript读取响应、DOM访问和Cookie操作；表单可跨域提交但JS无法读取iframe响应；CORS需正确配置预检响应头；JSONP仅适用于GET且已基本弃用；iframe跨域通信应使用postMessage并校验origin。
HTML 本身不执行同源策略校验，所谓“HTML跨域不支持同源策略”是误解——真正受限制的是 JavaScript 对响应的读取、DOM 访问和 Cookie 操作，不是 HTML 标签本身。关键不在 HTML 怎么写，而在后续 JS 是否能拿到结果、服务端是否配合。
form 提交跨域但 JS 读不到响应？
表单 <form action="https://api.other.com/submit" method="POST"> 可以正常提交，浏览器不会拦截，但提交后页面跳转或写入 <iframe> 时，JS 尝试读取 iframe.contentDocument 会报错：Blocked a frame with origin "https://my.com" from accessing a cross-origin frame。
- 这是硬性限制，无法用 JS 绕过，哪怕设置了
document.domain（仅对同主域子域有效） - 如果目标是异步提交 + 获取响应数据，不要依赖
target="iframe"+ JS 读取，改用fetch或XMLHttpRequest配合服务端 CORS - 若必须用表单且不能改服务端，可在同域下设一个中转接口（如
/api/forward），由它代理转发并返回结果
CORS 预检失败：OPTIONS 请求 403 或无响应？
当使用 fetch 发送带自定义 header（如 Authorization）、非简单 content-type（如 application/json）或非 GET/POST 方法时，浏览器会先发一个 OPTIONS 预检请求。服务端没正确响应这个预检，就会卡住。
- 服务端必须对
OPTIONS路径返回 200，并带上Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等头 -
Access-Control-Allow-Origin不能为*同时设置Access-Control-Allow-Credentials: true，否则浏览器拒绝 - Node.js/Koa 示例中漏写
ctx.set('Access-Control-Allow-Headers', '...')是常见疏漏点
JSONP 还能用吗？只适用于 GET 且服务端配合
JSONP 利用 <script> 标签不受同源限制的特性，但它要求服务端返回形如 callbackName({"data":1}) 的可执行 JS，前端提前声明该函数。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 现代项目基本弃用：不支持 POST、无错误捕获机制、无法设 header、易受 XSS 影响
- 仅剩少数老接口（如百度搜索建议
http://suggestion.baidu.com/su?wd=xxx&cb=xxx）还保留 JSONP 兼容 - 若你控制服务端，优先加 CORS 头；若只调第三方且它只提供 JSONP，注意回调函数名需动态生成防冲突
iframe 跨域通信必须双向配合
想让父页和跨域 iframe 交换消息，单靠 document.domain 不够——它只对同主域（如 a.example.com 和 b.example.com）有效，且要求两端都显式设置为相同值（如 example.com）。
- 通用解法是
window.postMessage()：父页调iframe.contentWindow.postMessage(data, "https://other.com")，iframe 内监听message事件并校验event.origin - 反过来 iframe 也可向父页发消息，用
parent.postMessage() - 别忽略
event.origin校验，否则恶意站点伪造 iframe 也能触发你的监听逻辑
最容易被忽略的是：表单提交本身从不被同源策略阻止，问题永远出在「之后你想做什么」——是跳转？是读 iframe？还是用 JS 处理响应？每种动作对应不同限制和解法，混用方案反而引发新错误。
