JSONP的简单介绍

一、JSONP介绍

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用<script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

二、同源策略介绍

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

1. 同源策略，它是由Netscape提出的一个著名的安全策略。
2. 现在所有支持JavaScript 的浏览器都会使用这个策略。
3. 所谓同源是指，域名，协议，端口相同。
4. 当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
5. 当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
6. 如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问

不同源的客户端脚本(JavaScript、ActionScript)在没明确授权的情况下，不能读写对方的资源。详细情况见下图：

三、前端跨域请求示例（JSONP应用）

window.onload = function() {
    $.ajax({
        type: "GET",
        url: "https://api.douban.com/v2/book/search?q=javascript&count=1",
        /*data: JSON.stringify(mydata),*/
        dataType: "jsonp",
        contentType: "application/json",
        //执行成功的回调函数
        success: function(data) {　
            $("#divCustomers").html(JSON.stringify(data))　　　　
            console.log(data);
        },
        //执行失败或错误的回调函数
        error: function(error) {　　
            console.log(error);
        }
    });
}

四、跨域资源共享 CORS

1.介绍

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

2.服务端跨域请求(Spring MVC支持跨域请求)

• 在后端控制器中添加@CrossOrigin，origins 指允许可访问的域列表，并设置有效期为3600秒

//跨域调接口
@CrossOrigin(origins = "*", maxAge = 3600)
@Controller
@RequestMapping("/gifts/")
public class TblGiftController extends DefaultTblGoodsFollowController{
......
}

• 全局配置过滤器

<filter>    
    <filter-name>CORS</filter-name>    
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>    
    <init-param>    
        <param-name>cors.allowOrigin</param-name>   
        <param-value>*</param-value>   
    </init-param>    
    <init-param>    
        <param-name>cors.supportedMethods</param-name>   
        <param-value>GET, POST, HEAD, PUT, DELETE</param-value>   
    </init-param>    
    <init-param>    
        <param-name>cors.supportedHeaders</param-name>   
        <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>   
    </init-param>    
    <init-param>    
        <param-name>cors.exposedHeaders</param-name>   
        <param-value>Set-Cookie</param-value>   
    </init-param>    
    <init-param>    
        <param-name>cors.supportsCredentials</param-name>   
        <param-value>true</param-value>   
    </init-param>    
</filter>    

<filter-mapping>    
    <filter-name>CORS</filter-name>    
    <url-pattern>/*</url-pattern>    
</filter-mapping>  

@Component
public class SimpleCORSFilter implements Filter {  
  public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
    HttpServletResponse response = (HttpServletResponse) res;  
    response.setHeader("Access-Control-Allow-Origin", "*");  
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
    response.setHeader("Access-Control-Max-Age", "3600");  
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");  
    chain.doFilter(req, res);  
  }  
  public void init(FilterConfig filterConfig) {}  
  public void destroy() {}  
}