同源策略和跨域解决方法

同源策略和跨域

同源(同源地址)

同源地址指的是两个页面地址的 协议 域名 端口 完全一样，这两个地址就是同源的，或者称为同源地址。

• 我们发现，在现代网站中(京东)一个公司可能具有很多的域名，也都不是同源地址，如果在公司内部都不能进行数据请求，是很不方便的。

URL网址的基本概念

• URL概念：统一资源定位符 （Uniform Resource Locator）
  • 俗称网址，用来标识某个资源在网络中的唯一位置。
• 组成部分：
  • 示例网址：https://detail.tmall.com/item.htmid=555428842095
  • 通信协议： https://
  • 域名（服务器地址）： detail.tmall.com
  • 资源（文件）的具体位置： /item.htm?id=555428842095

同源策略

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。

同源策略不允许和非同源的网站之间发送ajax请求。

• 发送跨域请求时，请求发送是成功的，响应也是成功的，只不过浏览器将响应的信息拦截了，开发者无法对响应信息进行操作。

• 对开发者操作的影响，无法对非同源的地址发送ajax请求(不能跨域)。

跨域

跨域指的是非同源网站之间发送ajax请求。

• 实际开发中，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。
  • JSONP ，兼容性好，但是只支持GET请求。
  • CORS ，兼容性不太好，但是支持GET、POST，并且是标准中提供的方式。

跨域方式-JSONP

JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。

• JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
• 由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。
• 但是 <script> 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。

JSONP 的实现原理：

• 通过 <script>标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

• 同源策略不限制script标签对非同源地址进行请求，可以借助script标签进行JSONP实现。

JSONP 实现步骤：

1. 准备一个处理函数handle()。
2. 通过script标签的src属性，进行接口的请求。
3. 请求时传入请求参数，callback 用来传递本地处理函数的函数名，其他参数随便写。
4. 当响应结束后，步骤1设置的处理函数会自动调用，
   • 可以在处理函数中对响应数据进行后续处理。

// 使用JSONP进行请求处理：
<script>
    function handle(res) {
    console.log(res);
}
</script>
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=handle&name=jack"></script>

说明：

• JSONP和JSON没有本质关联。
• JSONP与ajax没有任何关联。
  • JSONP是使用script标签的src属性进行请求发送。
  • ajax是通过浏览器提供的XMLHttpRequest对象发送请求。

jQuery发送JSONP请求的方式

jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除 <script>标签的方式，来发起 JSONP 数据请求。

jQuery使用的是$.ajax()方法进行JSONP操作。

• 在发起 JSONP 请求的时候，动态向 <header> 中 append追加 一个<script> 标签；
• 在 JSONP 请求成功以后，动态从 <header>中移除刚才 append 进去的 <script> 标签；

实现：

• 设置dataType属性为’jsonp’。

$.ajax({
    type: 'GET',
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp',
    data: {
        name: 'jack',
        age: 18
    },

    // 下面的两个属性作为了解即可，通常不会使用
    //jsonp: 'xyz',          // 将默认的请求参数名callback设置为其他名称xyz
    //jsonpCallback: 'abc',  // 将处理函数名称设置为指定名称abc

    dataType: 'jsonp',      // 设置dataType属性为'jsonp'，jQuery就会使用JSONP的方式进行请求发送
    success: function (res) {
        console.log(res);
    }
});

说明：

1. jQuery会将使用过的用于发送jsonp请求的script标签移除，打开页面也看不到。
2. 可以从浏览器的network看到请求的类型为 script 。

跨域方式-CORS

CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。