【黑马程序员济南中心】跨域请求之JSONP、CORS浅谈

1.为什么会有跨域？

      随着软件开发分工趋于精细，前后端开发分离成为趋势，前端同事负责前端页面的展示及页面逻辑处理，服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力，考虑到前后端同事开发工具和习惯的不同，必然需要将前后端项目进行独立，再者考虑到网站访问速度的问题，需要将静态资源部署到CDN服务器上这样项目分离也成为了必然。然而项目分离部署分离带来的问题就是跨域请求的问题。

本例对比较流行的两种跨域访问方式（Jsonp和CORS）进行讨论。（注：示例代码附在文章末尾处）

1.JSONP

      JSONP是利用浏览器对script的资源引用没有同源限制，通过动态插入一个script标签，当资源加载到页面后会立即执行的原理实现跨域的。JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

　　JSONP只支持GET请求而不支持POST等其它类型的HTTP请求,它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题，JSONP的优势在于支持老式浏览器，弊端也比较明显：需要客户端和服务端定制进行开发，服务端返回的数据不能是标准的Json数据，而是callback包裹的数据。

2.CORS

　　CORS是现代浏览器支持跨域资源请求的一种方式，全称是"跨域资源共享"（Cross-origin resource sharing），当使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

      CORS与JSONP的使用目的相同，但是比JSONP更强大，CORS支持所有的浏览器请求类型，承载的请求数据量更大，开放更简洁，服务端只需要将处理后的数据直接返回，不需要再特殊处理。

      1.不需要操作cookie

                只需要设置:setHeader("Access-Control-Allow-Origin","url/*")

      2.如果需要操作cookie

                前台:js需要增加参数:{'withCredentials':true}

                后台:

                        setHeader("Access-Control-Allow-Origin","url") //注意:地址不能使用"*"代表所有

                        setHeader("Access-Control-Allow-Credentials","true") //支持操作cookie

        注解方式:spring4.2版本以后提供了对跨域注解的支持，可以使用注解 @CorsOrigin

因需要实现跨域请求，跨域可以是：协议不一样,域名不一样,ip地址不一样,端口号不一样等多种情况。为了简单，下面示例代码使用tomcat服务器，端口号不同，分别部署两个项目，项目之间进行数据交互，验证跨域请求.

2个项目，展示如下：

1.JSONP示例代码:

1.1jsonp前端代码：（注：代码在demo1项目中）

function jsonpTest1() {//传统支持jsonp的方案

        $.ajax({

        url: 'http://localhost:8081/jsonp_demo2/jsonp/test1.do',

        dataType: 'jsonp',

        success: function (res, status, xhr) {

                alert(status);

                alert(res.msg);

        }

    });

}

function jsonpTest2() {//使用MappingJacksonValue，从spring4.1以后版本才可以使用

        $.ajax({

        url: 'http://localhost:8081/jsonp_demo2/jsonp/test2.do',

        dataType: 'jsonp',

        success: function (res, status, xhr) {

                alert(status);

                var resJson = $.parseJSON(res);

                alert(resJson.msg);

        }

    });

}

1.2jsonp后台代码：（注：代码在demo2项目中）

/**

* @author:admin

* 20182018年3月30日上午11:03:03

*/

/**

* 描述:

* @author zhuan

* @version 2018年3月30日 上午11:03:03

*/

package com.itcast.controller;

import org.apache.commons.lang3.StringUtils;

import org.springframework.http.converter.json.MappingJacksonValue;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import org.springframework.http.MediaType;

/**

* JS跨域解决方案一

* 描述:JSONP跨域请求controller

* @author zhuan

* @version 2018年3月31日 上午9:58:50

*/

@RestController

@RequestMapping("/jsonp")

public class JsonpController{

        /**

        *

        * 描述:传统支持jsonp的方案

        * @param param

        * @param callback

        * @return

        */

        @RequestMapping(value = "/test1", produces = MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8")

        public String jsonTest1(String param, String callback) {

                if (StringUtils.isNotBlank(callback)) {

                        // 客户端为jsonp请求。需要返回js代码

                        String jsonResutl = callback + "({\"type\":\"json\",\"msg\":\"test1 jsonp request success\"})";

                        return jsonResutl;

                }

                return "{\"type\":\"json\",\"msg\":\"test1 json request success\"}";

        }

        /**

        *

        * 描述:从spring4.1以后版本才可以使用

        *

        * @param param

        * @param callback

        * @return

        */

        @RequestMapping("/test2")

        public Object jsonTest2(String param,String callback){

                if(StringUtils.isNotBlank(callback)){

                        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue("{\"type\":\"jsonp\",\"msg\":\"test2 jsonp request success\"}");

                        //设置回调方法

                        mappingJacksonValue.setJsonpFunction(callback);

                        return mappingJacksonValue;

                }

                return "{\"type\":\"json\",\"msg\":\"test2 json request success\"}";

        }

}

2.CORS示例代码:

2.1cors前端代码：（注：代码在demo1项目中）

function corsTest() {

        $.ajax({

        url: 'http://localhost:8081/jsonp_demo2/cors/test.do',

        dataType: 'json',

        success: function (res, status, xhr) {

                alert(status);

                alert(res.msg);

        }

    });

}

2.2cors后台代码：（注：代码在demo2项目中）

package com.itcast.controller;

import org.springframework.web.bind.annotation.CrossOrigin;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

/**

* JS跨域解决方案二 描述:CORS跨域请求controller

*

* @author zhuan

* @version 2018年3月31日 上午9:58:50

*/

@RestController

@RequestMapping("/cors")

public class CorsController {

        // 1.不支持操作cookie

        // 只需要设置:setHeader("Access-Control-Allow-Origin","url/*")

        // 2.支持操作cookie

        // 前台:

        // js需要增加参数:{'withCredentials':true}

        // 后台:

        // setHeader("Access-Control-Allow-Origin","url") //注意:地址不能使用"*"代表所有

        // setHeader("Access-Control-Allow-Credentials","true") //支持操作cookie

        // 注解方式:spring4.2版本以后提供了对跨域注解的支持 @CorsOrigin

        /**

        *

        * 描述:

        *

        * @param param

        * @param callback

        * @return

        */

        @RequestMapping("/test")

        @CrossOrigin(origins = "http://localhost:8080")

        public String corsTest1(String param) {

                return "{\"type\":\"json\",\"msg\":\"cors json request success\"}";

        }

}