Spring Boot 通過(guò)CORS實(shí)現(xiàn)跨域問(wèn)題
同源策略
很多人對(duì)跨域有一種誤解，以為這是前端的事，和后端沒(méi)關(guān)系，其實(shí)不是這樣的，說(shuō)到跨域，就不得不說(shuō)說(shuō)瀏覽器的同源策略。
同源策略是由 Netscape 提出的一個(gè)著名的安全策略，它是瀏覽器最核心也最基本的安全功能，現(xiàn)在所有支持 JavaScript 的瀏覽器都會(huì)使用這個(gè)策略。所謂同源是指協(xié)議、域名以及端口要相同。同源策略是基于安全方面的考慮提出來(lái)的，這個(gè)策略本身沒(méi)問(wèn)題，但是我們?cè)趯?shí)際開(kāi)發(fā)中，由于各種原因又經(jīng)常有跨域的需求，傳統(tǒng)的跨域方案是 JSONP，JSONP 雖然能解決跨域但是有一個(gè)很大的局限性，那就是只支持 GET 請(qǐng)求，不支持其他類型的請(qǐng)求，而今天我們說(shuō)的 CORS（跨域源資源共享）（CORS，Cross-origin resource sharing）是一個(gè) W3C 標(biāo)準(zhǔn)，它是一份瀏覽器技術(shù)的規(guī)范，提供了 Web 服務(wù)從不同網(wǎng)域傳來(lái)沙盒腳本的方法，以避開(kāi)瀏覽器的同源策略，這是 JSONP 模式的現(xiàn)代版。
實(shí)踐
首先，我們新建兩個(gè)工程：
新建工程一：cors1 project
勾選Web模塊 因?yàn)槲覀兊认滦枰ㄟ^(guò)web接口進(jìn)行測(cè)試 點(diǎn)擊Finish完成構(gòu)建
在cors1 中 我們新建一個(gè)HelloController,寫(xiě)上一個(gè)測(cè)試接口：
@RestControllerpublic class HelloController { @GetMapping('/hello') public String hello(){ return 'hello cors1'; }}
新建工程二：cors2 project
對(duì)應(yīng)的勾選Web模塊進(jìn)行構(gòu)建。
在cors2的static目錄下，建立Index.html,并編寫(xiě)一個(gè)GET請(qǐng)求按鈕，發(fā)起Ajax請(qǐng)求（前提：static目錄下有jquery.js）請(qǐng)求cors1 工程的 localhost:8080/hello接口
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.hdgsjgj.cn/bcjs/jquery3.3.1.js'></script></head><body><div id='app'></div><input type='button' value='GET' onclick='getData()'><input type='button' value='PUT' onclick='putData()'><script> function getData() { $.get('http://localhost:8080/hello',function (msg) { $('#app').html(msg); }) }</script></body></html>
并設(shè)定cors2 工程的項(xiàng)目端口：
server.port = 8081
分別啟動(dòng)cors1 和 cors2
訪問(wèn) localhost:8081/index.html 點(diǎn)擊按鈕，發(fā)送請(qǐng)求：
訪問(wèn)報(bào)錯(cuò)，目前不支持跨域，驗(yàn)證了上面說(shuō)的 同源策略
解決方案一：
1.在Controller類 或 接口方法上，使用 注解 @CrossOrigin 指定允許哪個(gè)域服務(wù)器訪問(wèn)
@RestControllerpublic class HelloController { @GetMapping('/hello') @CrossOrigin(origins = 'http://localhost:8081') public String hello(){ return 'hello cors1'; }}
重啟 Cors1 項(xiàng)目，點(diǎn)擊發(fā)送請(qǐng)求：
訪問(wèn)成功，瀏覽器控制臺(tái)也沒(méi)有報(bào)錯(cuò)
注意：這種方式有一個(gè)弊端，就是我們需要在對(duì)外開(kāi)放的每個(gè)接口或者類上都要寫(xiě)一遍，大大增加了開(kāi)發(fā)的重復(fù)性和繁瑣性
解決方案二
Spring Boot 中，可以通過(guò)全局配置一次性解決這個(gè)問(wèn)題，全局配置只需要在 SpringMVC 的配置類中重寫(xiě) **addCorsMappings **方法即可
package org.taoguoguo;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/** * @author taoguoguo * @description WebMvcConfig * @website https://www.cnblogs.com/doondo * @create 2020-09-01 21:31 */@Configurationpublic class WebMvcConfig implements WebMvcConfigurer { /** * 跨域全局配置 * @param registry */ @Override public void addCorsMappings(CorsRegistry registry) { //addMapping 允許哪些接口跨域 //allowedOrigins 允許哪個(gè)域服務(wù)器訪問(wèn) //allowedHeaders 允許通過(guò)的請(qǐng)求頭 //maxAge 服務(wù)器在發(fā)送一些請(qǐng)求（例如put）會(huì)先發(fā)一個(gè)探測(cè)請(qǐng)求，避免每次都需要發(fā)送探測(cè)請(qǐng)求 可以設(shè)置有效期 registry.addMapping('/**').allowedOrigins('http://localhost:8081').allowedHeaders('*').allowedMethods('*').maxAge(30*1000); }}
/** 表示本應(yīng)用的所有方法都會(huì)去處理跨域請(qǐng)求，allowedMethods 表示允許通過(guò)的請(qǐng)求數(shù)，allowedHeaders 則表示允許的請(qǐng)求頭。經(jīng)過(guò)這樣的配置之后，就不必在每個(gè)方法上單獨(dú)配置跨域了
現(xiàn)在再去頁(yè)面訪問(wèn)，也是沒(méi)有問(wèn)題的
探測(cè)請(qǐng)求
我們?cè)诳缬蛟O(shè)置中
maxAge 服務(wù)器在發(fā)送一些請(qǐng)求（例如put）會(huì)先發(fā)一個(gè)探測(cè)請(qǐng)求，避免每次都需要發(fā)送探測(cè)請(qǐng)求 可以設(shè)置有效
先舉一個(gè)例子：我們?cè)贑ors1中添加一個(gè)put請(qǐng)求
@RestControllerpublic class HelloController { @GetMapping('/hello') @CrossOrigin(origins = 'http://localhost:8081') public String hello(){ return 'hello cors1'; } @PutMapping('/doput') public String doput(){ return 'doput'; }}
在cors2中增加put請(qǐng)求發(fā)送按鈕
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.hdgsjgj.cn/bcjs/jquery3.3.1.js'></script></head><body><div id='app'></div><input type='button' value='GET' onclick='getData()'><input type='button' value='PUT' onclick='putData()'><script> function getData() { $.get('http://localhost:8080/hello',function (msg) { $('#app').html(msg); }) } function putData() { $.ajax({ type:’put’, url: ’http://localhost:8080/doput’, success:function (msg) {$('#app').html(msg); } }) }</script></body></html>
啟動(dòng)cors1 cors2 發(fā)送put請(qǐng)求：
我們看到請(qǐng)求一次 瀏覽器會(huì)發(fā)送兩次請(qǐng)求，其中Request Methods 為 options 的即為探測(cè)請(qǐng)求因?yàn)槲覀冊(cè)O(shè)置了探測(cè)請(qǐng)求的有效期，因此當(dāng)我們?cè)俅伟l(fā)送時(shí)，瀏覽器只會(huì)發(fā)送一次請(qǐng)求
了解了整個(gè) CORS 的工作過(guò)程之后，我們通過(guò) Ajax 發(fā)送跨域請(qǐng)求，雖然用戶體驗(yàn)提高了，但是也有潛在的威脅存在，常見(jiàn)的就是 CSRF（Cross-site request forgery）跨站請(qǐng)求偽造。跨站請(qǐng)求偽造也被稱為 one-click attack 或者 session riding，通常縮寫(xiě)為 CSRF 或者 XSRF，是一種挾制用戶在當(dāng)前已登錄的 Web 應(yīng)用程序上執(zhí)行非本意的操作的攻擊方法
假如一家銀行用以運(yùn)行轉(zhuǎn)賬操作的URL地址如下：**http://icbc.com/aa?bb=cc**，那么，一個(gè)惡意攻擊者可以在另一個(gè)網(wǎng)站上放置如下代碼：**<img src='http://icbc.com/aa?bb=cc'>**，如果用戶訪問(wèn)了惡意站點(diǎn)，而她之前剛訪問(wèn)過(guò)銀行不久，登錄信息尚未過(guò)期，那么她就會(huì)遭受損失。
基于此，瀏覽器在實(shí)際操作中，會(huì)對(duì)請(qǐng)求進(jìn)行分類，分為簡(jiǎn)單請(qǐng)求，預(yù)先請(qǐng)求，帶憑證的請(qǐng)求等，預(yù)先請(qǐng)求會(huì)首先發(fā)送一個(gè) options 探測(cè)請(qǐng)求，和瀏覽器進(jìn)行協(xié)商是否接受請(qǐng)求。默認(rèn)情況下跨域請(qǐng)求是不需要憑證的，但是服務(wù)端可以配置要求客戶端提供憑證，這樣就可以有效避免 csrf 攻擊。
總結(jié)
到此這篇關(guān)于Spring Boot 通過(guò)CORS實(shí)現(xiàn)跨域問(wèn)題的文章就介紹到這了,更多相關(guān)Spring Boot實(shí)現(xiàn)跨域內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼2. python 浮點(diǎn)數(shù)四舍五入需要注意的地方3. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法4. python開(kāi)發(fā)一款翻譯工具5. 利用CSS制作3D動(dòng)畫(huà)6. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）7. Springboot 全局日期格式化處理的實(shí)現(xiàn)8. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題9. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)10. PHP實(shí)現(xiàn)簡(jiǎn)單線性回歸之?dāng)?shù)學(xué)庫(kù)的重要性
網(wǎng)公網(wǎng)安備