js中跨域方法原理详解

JS中跨域方法原理详解

在Web开发中，由于浏览器的安全限制，不同源（Origin）之间的JS脚本不能自由互相访问。这种限制称为“同源策略”（Same Origin Policy）。但是，在现实中，我们经常需要通过AJAX等方式从不同源获取数据或者调用API，这时就需要跨域技术（Cross-Origin Resource Sharing, CORS）来解决。

跨域请求的限制

同源策略限制了如下行为：

Cookie、LocalStorage 和 IndexDB 等存储性质的相关 API 无法读取。
无法发送除 GET、POST、HEAD 以外的请求。
XMLHttpRequest 对象只能向同源地址发出请求，即只能使用相对路径或绝对路径的同源 URL 发起 HTTP 请求。
DOM 只能访问同源的文档对象。

跨域的解决方案

JSONP

JSONP 是一种利用 <script> 标签可以跨域加载资源的特性来实现跨域数据传输的方法。具体实现方式是将要获取的数据作为参数传入一个函数，然后服务器返回该函数的调用结果，前端页面就可以直接得到该数据。

示例代码：

-------- -------------------- -
  -------------------- ------
-

----- ------ - ---------------------------------
---------- - -------------------------------------------------
----------------------------------

服务器返回的数据格式为：

---------------- ------- ----- ------ -- ---

JSONP 的优点是简单易用，但缺点也很明显，如无法处理 POST 请求等。另外，由于它是执行 JavaScript 代码片段，因此存在安全风险。

CORS

CORS 是目前最常用的跨域解决方案。在服务端设置 Access-Control-Allow-Origin 头部信息即可使客户端跨域请求。

示例代码：

----- --- - --- -----------------
--------------- --------------------------
------------------- - -----
---------------------- - ---------- -
  -- --------------- --- - -- ---------- --- ---- -
    ------------------------------
  -
--
-----------

在服务端需要设置以下头部信息：

---------------------------- ---------------------
--------------------------------- ----

其中 Access-Control-Allow-Origin 表示允许哪些域名进行跨域请求，如果设置为 * 表示允许所有域名。Access-Control-Allow-Credentials 表示是否允许发送 Cookie 等凭证信息。

结语

本文介绍了常见的两种跨域解决方案，其中 JSONP 可以应用于简单的数据获取场景，而 CORS 更加灵活、安全且适用于大多数情况下。对于开发者来说，掌握跨域能力是必须的，但同时也要注意安全风险。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/3667