|
轉(zhuǎn)自：https://www.cnblogs.com/cb1186512739/p/13304551.html 一、什么是同源策略,？ 1,、同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器,，它是瀏覽器最核心也最基本的安全功能,，如果缺少了同源策略,，瀏覽器很容易受到XSS,、CSFR等攻擊。 瀏覽器采用同源策略,，禁止頁面加載或執(zhí)行與自身來源不同的域的任何腳本,。換句話說瀏覽器禁止的是來自不同源的"document"或腳本，對(duì)當(dāng)前"document"讀取或設(shè)置某些屬性,。 情景： 比如一個(gè)惡意網(wǎng)站的頁面通過iframe嵌入了銀行的登錄頁面（二者不同源）,，如果沒有同源限制，惡意網(wǎng)頁上的javascript腳本就可以在用戶登錄銀行的時(shí)候獲取用戶名和密碼,。 瀏覽器中有哪些不受同源限制呢,？ <script>、<img>、<iframe>,、<link>這些包含 src 屬性的標(biāo)簽可以加載跨域資源,。但瀏覽器限制了JavaScript的權(quán)限使其不能讀、寫加載的內(nèi)容,。 常見的解決方案分為三種,，Nginx代理（前端實(shí)現(xiàn)）,，JSONP（前端實(shí)現(xiàn)）,，后臺(tái)設(shè)置（后端實(shí)現(xiàn)）。 1.Nginx代理（前端實(shí)現(xiàn)）： 案例說明：前端項(xiàng)目部署在8081端口,，后端8081端口,。
nginx監(jiān)聽8081端口,將前端從nginx監(jiān)聽的端口8081請(qǐng)求過來的請(qǐng)求，代理轉(zhuǎn)發(fā)到8080端口（8080為后端接口）
1,、JSONP 前端實(shí)現(xiàn)：  $.ajax({
url: 'http://www.:8080/login',
type: 'get',
dataType: 'jsonp', // 請(qǐng)求方式為jsonp
jsonpCallback: "onBack", // 自定義回調(diào)函數(shù)名
data: {}
});
后端實(shí)現(xiàn)（SpringBoot） @ControllerAdvice(basePackages = "com.zkn.learnspringboot.web.controller")
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
public JsonpAdvice() {
super("callback","jsonp");
}
}
（1）前端發(fā)起請(qǐng)求時(shí)候,，會(huì)加一個(gè)參數(shù)表示回調(diào)的函數(shù) 比如 callback=callback124 (callback 參數(shù)名也是可以自定義的,，和后端協(xié)商好就行) （3）JSONP的缺點(diǎn) JSONP只支持 GET 請(qǐng)求。 （4）原理 JSONP 是通過動(dòng)態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器的腳本（<script>含有src屬性,，src屬性沒有跨域限制）,；而 Ajax 是通過 XHR(XmlHttpRequest) 對(duì)象,。 2、跨域技術(shù)-CORS （CrossOrigin Resources Sharing,，跨源資源共享） CORS是什么？ CORS,，是 HTML5 的一項(xiàng)特性,，它定義了一種瀏覽器和服務(wù)器交互的方式來確定是否允許跨域請(qǐng)求。 相對(duì)于 JSONP 這種解決方案來說,，使用CORS,，不需要要求服務(wù)器以指定格式返回?cái)?shù)據(jù)（包裝成JS腳本的格式：callback_func({ data });）；CORS,，只需要在服務(wù)器端做一些通用設(shè)置。 前端實(shí)現(xiàn)： $.ajax({
type: "post",
url: 'http://192.168.45.152:8081/conference/user/bind',
async: false, // 使用同步方式
// 1 需要使用JSON.stringify 否則格式為 a=2&b=3&now=14...
// 2 需要強(qiáng)制類型轉(zhuǎn)換,，否則格式為 {"a":"2","b":"3"}
data: JSON.stringify({
a: 1,
b: '2',
now: new Date().getTime() // 注意不要在此行增加逗號(hào)
}),
headers: {
'Authentication':'xxxxxx'
},
contentType: "text/plain",
dataType: "json",
success: function(data) {
console.log(data)
} // 注意不要在此行增加逗號(hào)
});
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
//設(shè)置允許跨域的路徑
registry.addMapping("/**")
//設(shè)置允許跨域請(qǐng)求的域名
.allowedOrigins("*")
//是否允許證書 不再默認(rèn)開啟
.allowCredentials(true)
//設(shè)置允許的方法
.allowedMethods("GET", "POST")
//跨域允許時(shí)間
.maxAge(3600);
}
}
CORS與JSONP的使用目的相同,，但是比JSONP更強(qiáng)大,。 JSONP只支持GET請(qǐng)求，CORS支持所有類型的HTTP請(qǐng)求,。JSONP的優(yōu)勢(shì)在于支持老式瀏覽器,，以及可以向不支持CORS的網(wǎng)站請(qǐng)求數(shù)據(jù)。
四,、跨域會(huì)話保持 對(duì)于前端來說,，seesion字段是存在cookie中的。在跨域過程中,，Cookie是默認(rèn)不發(fā)送的,。就算后端返回set-Cookie字段，前端也不會(huì)保存Cookie,更不會(huì)在下一次訪問的時(shí)候發(fā)送到后端了,。 1,、在ajax中設(shè)置,，withCredentials: true。 $.ajax({
url: a_cross_domain_url,
xhrFields: {
withCredentials: true
}
});
第二第三步，就是上面的服務(wù)端CORS的跨域技術(shù) 服務(wù)端的 Access-Control-Allow-Credentials: true,，代表服務(wù)器接受Cookie和HTTP認(rèn)證信息,。
參考資料： （1）前后端分離-跨域會(huì)話如何保持？ https://www.jianshu.com/p/26f877d2b315?tdsourcetag=s_pcqq_aiomsg （2）Session與Token認(rèn)證機(jī)制 前后端分離下如何登錄 https://www.cnblogs.com/eret9616/p/9661314.html?tdsourcetag=s_pcqq_aiomsg （3）理解Cookie和Session機(jī)制 https://www.cnblogs.com/andy-zhou/p/5360107.html
轉(zhuǎn)： https://blog.csdn.net/kevinxxw/article/details/90547184
|
|
|
