AJAX(六)——跨域及解决方法

同源策略

什么是同源

同源是指 : 协议, 域名和端口一样

同源策略

• 同源策略是浏览器提供的一个安全功能

• 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

• 通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

② 无法接触非同源网页的 DOM

③ 无法向非同源地址发送 Ajax 请求

跨域

开发三种模式

• 前后端不分离

1. 前端页面看到的效果都是由后端控制，由后端渲染页面或重定向
2. 这种模式下前端与后端的耦合度很高。
3. 这样后端的工作压力较大
   

• 前后端半分离

1. 前端负责开发页面，通过接口（Ajax）获取数据，采用Dom操作对页面进行数据绑定，最终是由前端把页面渲染出来。
2. 这也就是Ajax与SPA应用（单页应用）结合的方式
   

• 前后端完全分离

1. 这种模式下 , 后端仅返回前端所需的数据，不用再渲染HTML页面
2. 至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，后端仅需开发一套逻辑对外提供数据即可。
3. 在前后端分离的应用模式中 ，前端与后端的耦合度相对较低。
4. 在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。
   

什么是跨域

• 同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域

• 出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互

• 

JSONP解决跨域问题

JSONP是 JSON 的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。

原理:

• 由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通
• 而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。
• 用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
• 总结 : JSONP利用script标签绕过同源策略，通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。
• 实现过程 : 当JSONP请求时 , 在html的<header> 里动态创建一个<script> , 当请求成功 , 再动态删除这个<script>
• 1.请求方创建script，src指向响应方，同时传一个查询参数 ?callbackName=yyy
  2.响应方根据查询参数callbackName，构造形如
  （1）yyy.call(undefined, ‘你要的数据’）
  （2）yyy(‘你要的数据’）
  这样的响应
  3.浏览器接收到相应，就会执行yyy.call(undefined,'你要的数据’)
  4.那么请求方就知道了他要的数据
  这就是JSONP

jQuery中的代码实现:

$.ajax({
     url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
     // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
     dataType: 'jsonp',
     success: function(res) {
     console.log(res)
     }
})

注意： JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到XMLHttpRequest 这个对象

• 由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。

Cors解决跨域问题

• 什么是Cors

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。但是目前基本上浏览器都支持，所以我们只要保证服务器端服务器实现了 CORS 接口，就可以跨源通信。