在前端开发中,我们经常需要通过网络请求获取服务器上的数据。这时候就需要使用 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 字段,指明允许的源。如果没有设置该字段或值为 *,则表示允许所有的源。
示例代码:
const xhr = new XMLHttpRequest() xhr.open('GET', 'http://example.com/getUserInfo.php') xhr.withCredentials = true xhr.onload = function() { console.log(xhr.responseText) } xhr.send()
postMessage
postMessage 是一种在不同 window 或 iframe 间传递数据的方法。它可以用于与嵌入应用程序进行通信,也可以用于跨域请求。
当使用 postMessage 发送消息时,可以指定接收窗口的 origin 值,只有 origin 值匹配的窗口才能接收到对应的消息。
示例代码:
-- -------------------- ---- ------- -- ------- ------------------------------------ -------- --------------------- -- ------- ---------------------------------- --------------- - -- ------------- --- --------------------- - ----------------------- - --
总结
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/24955