JSONP的简单介绍

阳光穿透心脏的1/2处 2022-05-29 09:11 182阅读 0赞

## 一、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)在没明确授权的情况下，不能读写对方的资源。详细情况见下图：  
![这里写图片描述][Image 1]

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

## 四、跨域资源共享 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() {} }

[Image 1]: