阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 https://www.cnblogs.com/wangsen/p/8316039.html 「王森」欢迎转载，保留摘要，谢谢！

• 什么是跨域
• 为什么非得跨域
• spring使用jsonp解决跨域
  • controller中
  • jquery ajax
• 使用CORS(跨域资源共享)解决跨域问题
  • 主要配置
  • 使用注解CrossOrigin
  • jquery ajax的写法
  • CORS全局配置
  • 资料

---

🙂🙂🙂关注**微信公众号：【芋道源码】**有福利：

1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
4. 新的源码解析文章实时收到通知。每周更新一篇左右。
5. 认真的源码交流微信群。

---

什么是跨域

一句话：同一个ip、同一个网络协议、同一个端口，三者都满足就是同一个域，否则就是跨域。

为什么非得跨域

基于两个方面：

a. web应用本身是部署在不同的服务器上 b.基于开发的角度 --- 前后端分离 web应用本身是部署在不同的服务器上，对应的域名也就有所不同 比如百度。 主域名：https://www.baidu.com/ 二级域名：http://image.baidu.com/， http://music.baidu.com/，http://wenku.baidu.com/ 需要在不同的域之间，通过ajax方式互相请求，是非常常见的需求。

spring使用jsonp解决跨域

Spring 4中增加了对jsonp的原生支持，只需要ControllerAdvice就可以开启，方法如下： 首先新建一个Advice类，我们叫做“JsonpAdvice”，然后在里面定义接收jsonp请求的参数key：

package cn.isuyang.web.sso.advice;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;
/**
* 使用jsonp实现跨域的支持
* @author  WangSen(wangsenhehe@126.com)
* @Date    2018年1月8日
*/
@ControllerAdvice("cn.isy.web.sso.web")
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
    public JsonpAdvice() {
        super("callback");
    }
}

@ControllerAdvice("cn.isy.web.sso.web")指定作用的包名 supper("callback")指定的是url中callback： http://sso.isy.cn/logout?callback=successCallback

注意： 我们还可以重写AbstractJsonpResponseBodyAdvice中的feforeBodyWriteInternal方法： 做到实现url携带callback就返回jsonp格式，没有就返回正常格式

controller中

controller中的代码正常编写就OK，不用修改任何东西。 只要保证在cn.isy.web.sso.web包下即可！

jquery ajax

注意：必须使用jsonp的方式提交请求！

$.ajax({
                type : "get",
                async:false,
                dataType:'jsonp',
                url: 'http://sso.isy.cn/login.json',
                data: $("#loginForm").serialize(),
                crossDomain: true,
                jsonpCallback:"successCallback",
                xhrFields: {
                    withCredentials: true
                },
                success : function(data){

                },
                error:function(data){
                    console.log("登录出错");
                    $.we.utils.gotoUrl("/");
                }
            });

使用CORS(跨域资源共享)解决跨域问题

有关cors的介绍可以去详细看一下，这里就不作重复了： CORS详解 跨资源共享CORS详解

主要配置

Access-Control-Allow-Origin:  http://www.YOURDOMAIN.com            // 设置允许请求的域名，多个域名以逗号分隔
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS      // 设置允许请求的方法，多个方法以逗号分隔
Access-Control-Allow-Headers: Authorization                        // 设置允许请求自定义的请求头字段，多个字段以逗号分隔
Access-Control-Allow-Credentials: true                              // 设置是否允许发送 Cookies

使用注解CrossOrigin

在controller类上添加CrossOrigin注解表示当前类中的所有入口函数都 可以实现跨域。也可以指定某个conroller中具体的方法。

了解一下这个注解的内容：

jquery ajax的写法

注意：这里不用使用jsonp的方式请求普通的ajax即可！，因为浏览器自己可以去做!

$.ajax({
    type : "get",
    url: 'http://sso.isy.cn/login.json',
    data: $("#loginForm").serialize(),
    xhrFields: {
        withCredentials: true //注意这里必须指定否则cookie无法传递过去
    },
    success : function(data){

    },
    error:function(data){
        console.log("登录出错");
        $.we.utils.gotoUrl("/");
    }
});

CORS全局配置

https://www.jianshu.com/p/d05303d34222 自己试了试没有成功！

资料

解释cors的原理不错 https://zhuanlan.zhihu.com/p/24411090

让自己变得更优秀才可以有更多资源