什麽是跨域

一句話：同一個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([email protected])
* @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

spring mvc的跨域解決方案