网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置。本文只想解决问题,所有的代码经过亲自实践。
 
本文解决跨域中的 get、post、data、cookie 等这些问题。
 
本文只会说 get 请求和 post 请求,读者请把 post 请求理解成除 get 请求外的所有其他请求方式。
 
JSONP
 
jsonp 的原理很简单,利用了【前端请求静态资源的时候不存在跨域问题】这个思路。
 
但是 只支持 get,只支持 get,只支持 get。
 
注意一点,既然这个方法叫 jsonp,后端数据一定要使用 json 数据,不能随便的搞个字符串什么的,不然你会觉得结果莫名其妙的。
 
前端 jQuery 写法

    $.ajax({

    type: "get",

    url: baseUrl + "/jsonp/get",

    dataType: "jsonp",

    success: function(response) {

    $("#response").val(JSON.stringify(response));

    }

    });
dataType: “jsonp”。除了这个,其他配置和普通的请求是一样的。
 
后端 SpringMVC 配置
 
如果你也使用 SpringMVC,那么配置一个 jsonp 的 Advice 就可以了,这样我们写的每一个 Controller 方法就完全不需要考虑客户端到底是不是 jsonp 请求了,Spring 会自动做相应的处理。
    @ControllerAdvice

    public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {

        public JsonpAdvice(){

            // 这样如果请求中带 callback 参数,Spring 就知道这个是 jsonp 的请求了

            super("callback");

        }

    }
以上写法要求 SpringMVC 版本不低于 3.2,低于 3.2 的我只能说,你们该升级了。
 
后端非 SpringMVC 配置
 
以前刚工作的时候,Struts2 还红遍天,几年的光景,SpringMVC 就基本统治下来了国内市场。
 
偷懒一下,这里贴个伪代码吧,在我们的方法返回前端之前调一下 wrap 方法:
    @ControllerAdvice

    public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {

        public JsonpAdvice(){

            // 这样如果请求中带 callback 参数,Spring 就知道这个是 jsonp 的请求了

            super("callback");

        }

    }
CORS
 
Cross-Origin Resource Sharing
 
毕竟 jsonp 只支持 get 请求,肯定不能满足我们的所有的请求需要,所以才需要搬出 CORS。
 
国内的 web 开发者还是比较苦逼的,用户死不升级浏览器,老板还死要开发者做兼容。
 
CORS 支持以下浏览器,目前来看,浏览器的问题已经越来越不重要了,连淘宝都不支持 IE7 了~~~
 
  • Chrome 3+
  • Firefox 3.5+
  • Opera 12+
  • Safari 4+
  • Internet Explorer 8+
 
前端 jQuery 写法
 
直接看代码吧:
    $.ajax({

        type: "POST",

        url: baseUrl + "/jsonp/post",

        dataType: 'json',

        crossDomain: true,

        xhrFields: {

            withCredentials: true

        },

        data: {

            name: "name_from_frontend"

        },

        success: function (response) {

            console.log(response)// 返回的 json 数据

            $("#response").val(JSON.stringify(response));

        }

    });
dataType: “json”,这里是 json,不是 jsonp,不是 jsonp,不是 jsonp。
crossDomain: true,这里代表使用跨域请求
 
xhrFields: {withCredentials: true},这样配置就可以把 cookie 带过去了,不然我们连 session 都没法维护,很多人都栽在这里。当然,如果你没有这个需求,也就不需要配置这个了。
 
后端 SpringMVC 配置
 
对于大部分的 web 项目,一般都会有 mvc 相关的配置类,此类继承自 WebMvcConfigurerAdapter。如果你也使用 SpringMVC 4.2 以上的版本的话,直接像下面这样添加这个方法就可以了:
    @Configuration

    public class WebConfig extends WebMvcConfigurerAdapter {

        @Override

        public void addCorsMappings(CorsRegistry registry) {

            registry.addMapping("/**/*").allowedOrigins("*");

        }

    }

如果很不幸你的项目中 SpringMVC 版本低于 4.2,那么需要「曲线救国」一下:

    public class CrossDomainFilter extends OncePerRequestFilter {

        @Override

        protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {

            response.addHeader("Access-Control-Allow-Origin", "*");// 如果提示 * 不行,请往下看

            response.addHeader("Access-Control-Allow-Credentials", "true");

            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");

            response.addHeader("Access-Control-Allow-Headers", "Content-Type");

            filterChain.doFilter(request, response);

        }

    }

在 web.xml 中配置下 filter:

    <filter>

        <filter-name>CrossDomainFilter</filter-name>

        <filter-class>com.javadoop.filters.CrossDomainFilter</filter-class>

    </filter>

    <filter-mapping>

        <filter-name>CrossDomainFilter</filter-name>

        <url-pattern>/*</url-pattern>

    </filter-mapping>
有很多项目用 shiro 的,也可以通过配置 shiro 过滤器的方式,这里就不介绍了。
 
注意了,我说的是很笼统的配置,对于大部分项目是可以这么笼统地配置的。文中类似 “*” 这种配置读者应该都能知道怎么配。
 
如果读者发现浏览器提示不能用 ‘*’ 符号,那读者可以在上面的 filter 中根据 request 对象拿到请求头中的 referer(request.getHeader(“referer”)),然后动态地设置 “Access-Control-Allow-Origin”:
    String referer = request.getHeader("referer");

    if (StringUtils.isNotBlank(referer)) {

        URL url = new URL(referer);

        String origin = url.getProtocol() + "://" + url.getHost();

        response.addHeader("Access-Control-Allow-Origin", origin);

    } else {

        response.addHeader("Access-Control-Allow-Origin", "*");

    }
前端非 jQuery 写法
 
jQuery 一招鲜吃遍天的日子是彻底不在了,这里就说说如果不使用 jQuery 的话,怎么解决 post 跨域的问题。
 
来一段原生 js 介绍下:
    function createCORSRequest(method, url) {

        var xhr = new XMLHttpRequest();

        if ("withCredentials" in xhr) {

            // 如果有 withCredentials 这个属性,那么可以肯定是 XMLHTTPRequest2 对象。看第三个参数

            xhr.open(method, url, true);

        } else if (typeof XDomainRequest != "undefined") {

            // 此对象是 IE 用来跨域请求的

            xhr = new XDomainRequest();

            xhr.open(method, url);

        } else {

            // 如果是这样,很不幸,浏览器不支持 CORS

            xhr = null;

        }

        return xhr;

    }

    var xhr = createCORSRequest('GET', url);

    if (!xhr) {

        throw new Error('CORS not supported');

    }

其中,Chrome,Firefox,Opera,Safari 这些「程序员友好」的浏览器使用的是 XMLHTTPRequest2 对象。IE 使用的是 XDomainRequest。

搞定所有的跨域请求问题 jsonp CORS的更多相关文章

  1. 跨域请求之JSONP 一

    跨域请求之JSONP 一 跨域请求的方式有很多种, iframe document.domain window.name script XDomainRequest (IE8+) XMLHTTPReq ...

  2. js跨域请求(jsonp)

    jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...

  3. JAVAEE——宜立方商城11:sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求(jsonp)

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  4. Ajax+Spring MVC实现跨域请求(JSONP)JSONP 跨域

    JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callba ...

  5. 跨域请求,jsonp

    其实跨域请求,只需要在请求的url后面加上callback=?即可. 提供以下两种获取跨域的ajax的写法,都是基于jQuery.都已经成功使用,兼容做到ie7,(ie6未测试);案例地址来自豆瓣开放 ...

  6. Django跨域请求之JSONP和CORS

    现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...

  7. Ajax+Spring MVC实现跨域请求(JSONP)(转)

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

  8. 跨域请求:JSONP

    在JavaScript中,有一个很重要的安全性限制,被称为"同源策略".即JavaScript只能访问与包含它的文档在同一域下的内容.然而,当进行一些比较深入的前端编程的时候,不可 ...

  9. 跨域请求之jsonp的实现方式

    ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在sr ...

随机推荐

  1. Django ORM OneToOneField

    一对一关系 一对一关系与多对一关系非常相似.如果你在模型中定义一个OneToOneField,该模型的实例将可以通过该模型的一个简单属性访问关联的模型. class Person(models.Mod ...

  2. java中关于重载与重写的区别

    1.重载 允许多个同名但是形式参数个数或参数类型不同的方法存在同一个类中,在调用时根据形式参数列表来调用对应的方法. 2.判断 (1):方法名必须相同. (2):形式参数个数不同或者参数类型不同(满足 ...

  3. Nginx禁止直接通过IP地址访问网站以及限制IP登陆某目录(关闭默认站点或空主机头)

    这篇文章主要介绍了Nginx中禁止使用IP访问网站的配置实例,一般在备案时可能需要这种设置,需要的朋友可以参考下   国内因为备案的原因,所有服务器都要禁止使用IP访问网站.否则,如果允许使用IP访问 ...

  4. 类 __new__方法实现单例

    继承了单例的类,子类也是单例模式

  5. MyBatis持久层框架学习之01 MyBatis的起源和发展

    一.MyBatis的简介  MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.    MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集. MyB ...

  6. Java设计模式从精通到入门二 装饰器模式

    介绍 ​ 我尽量用最少的语言解释总结: ​ Java23种设计模式之一,属于结构型模式,允许向一个现有的对象添加新的功能,不改变其结构. 应用实例: ​ 给英雄联盟种的射手,添加不同的装备.先装备攻速 ...

  7. SQL sysobjects 表 详解

    sysobjects 表 在数据库内创建的每个对象(约束.默认值.日志.规则.存储过程等)在表中占一行.只有在 tempdb 内,每个临时对象才在该表中占一行. 列名 数据类型 描述 name sys ...

  8. C#读取大数据量Excel

    var worksheet = workbook.Worksheets["工作表1"]; var maxN = worksheet.Range["A1"].En ...

  9. python-线程的暂停, 恢复, 退出

    我们都知道python中可以是threading模块实现多线程, 但是模块并没有提供暂停, 恢复和停止线程的方法, 一旦线程对象调用start方法后, 只能等到对应的方法函数运行完毕. 也就是说一旦s ...

  10. HDU3915 Game 高斯消元

    题目链接 HDU3915 Game 高斯消元 题解 求异或方程组自由元的子集个数 高斯消元求秩,内存溢出好神 代码 #include<bitset> #include<cstdio& ...