今天主要给大家分享一下，跨域方面的知识，希望对正在学习这方面知识的朋友有所帮助，首先讨论一下跨域是怎么诞生的。
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项目中）
         

[JavaScript] 纯文本查看 复制代码

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项目中）
         

[Java] 纯文本查看 复制代码

/**
 * @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项目中）
         

[JavaScript] 纯文本查看 复制代码

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项目中）
         

[Java] 纯文本查看 复制代码

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\"}";
        }
}

示例代码：（因项目太大，无法上传，故分享百度云盘连接）
         链接：https://pan.baidu.com/s/17KMUn8_lklE-LrnhbwQYaA 密码：0aqk    jsonp&cors_demo1.zip
         链接：https://pan.baidu.com/s/1-BQ_BI47Pmk9z_-ZM7Ac3Q 密码：iixr      jsonp&cors_demo2.zip

加油~~~~~~~~~~~~~~~~~~~~~~~

我来占层楼啊