在前端开发中，我们经常需要通过网络请求获取服务器上的数据。这时候就需要使用 XMLHttpRequest 或 Fetch API 这样的工具来发送请求。但是，在发送请求的过程中，我们还需要考虑同源策略。
同源策略是什么？
同源策略（Same-Origin Policy）是浏览器的一项安全策略，它可以防止一个网页从另一个源加载任何资源。这里的“源”指的是协议、域名和端口号的组合，如果两个 URL 的这三者都相同，就被认为是同源。
同源策略的原理是：只有与当前页面来源相同的文档才能读取该文档的信息。例如，一个包含恶意代码的网站不能够访问你的银行账户，因为它们不是同源。
跨域请求问题
当我们需要向不同的域名或端口发送请求时，就会遇到跨域请求问题。换句话说，如果请求的 URL 的协议、域名或端口号与当前页面不同，就会触发跨域请求。
跨域请求是受同源策略限制的，所以如果我们想要跨域请求，就需要通过浏览器提供的协议来允许跨域请求，如 JSONP、CORS、postMessage 等。
解决跨域问题
JSONP
JSONP（JSON with Padding）是一种在 Web 应用中进行跨域请求的技术。它通过动态创建 script 标签来实现，具体做法是将需要获取的数据作为参数传入一个 JS 函数中，并将该函数名作为查询参数传递给另一个域名的服务端，服务端返回一个包含该函数调用的 JS 代码，浏览器解析后即可拿到数据。
JSONP 的优点是兼容性强、易于使用，但缺点是只支持 GET 方法，且存在安全风险，容易受到 XSS 攻击。
示例代码：
-------- --------------------- - ----- ------ - -------------------------------- ---------- - ---------------------------------------------- - -------- --------------------------------- - -------- -------------------- - ----------------- - -----------------------------
CORS
CORS（Cross-Origin Resource Sharing）是一种通过添加 HTTP 头信息来允许浏览器与服务器进行跨域通信的机制。它可以支持 GET、POST 和其他 HTTP 请求方法。
CORS 的原理是：当浏览器向服务器发送跨域请求时，服务器会在响应头中添加 Access-Control-Allow-Origin 字段，指明允许的源。如果没有设置该字段或值为 *，则表示允许所有的源。
示例代码：
----- --- - --- ---------------- --------------- ------------------------------------- ------------------- - ---- ---------- - ---------- - ----------------------------- - ----------
postMessage
postMessage 是一种在不同 window 或 iframe 间传递数据的方法。它可以用于与嵌入应用程序进行通信，也可以用于跨域请求。
当使用 postMessage 发送消息时，可以指定接收窗口的 origin 值，只有 origin 值匹配的窗口才能接收到对应的消息。
示例代码：
-- -------
------------------------------------ -------- ---------------------
-- -------
---------------------------------- --------------- -
-- ------------- --- --------------------- -
-----------------------
-
--总结
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24955