邮递员如何发送请求?同源策略

阅读时长 4 分钟读完

在前端开发中,我们经常需要通过网络请求获取服务器上的数据。这时候就需要使用 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

纠错
反馈