建站
咨詢
售后
建站咨詢
新聞中心
只要協(xié)議，子域名，主域名，端口號(hào)這四項(xiàng)組成部分中有一項(xiàng)不同，就可以認(rèn)為是不同的域，不同的域之間互相訪問(wèn)資源，就被稱之為跨域。
成都網(wǎng)站制作、做網(wǎng)站的開(kāi)發(fā)，更需要了解用戶，從用戶角度來(lái)建設(shè)網(wǎng)站，獲得較好的用戶體驗(yàn)。創(chuàng)新互聯(lián)多年互聯(lián)網(wǎng)經(jīng)驗(yàn)，見(jiàn)的多，溝通容易、能幫助客戶提出的運(yùn)營(yíng)建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來(lái)訪用戶感受到浩方產(chǎn)品的價(jià)值服務(wù)。
一、什么是跨域訪問(wèn)
說(shuō)到跨域訪問(wèn)，必須先解釋一個(gè)名詞：同源策略。所謂同源策略就是在瀏覽器端出于安全考量，向服務(wù)端發(fā)起請(qǐng)求必須滿足：協(xié)議相同、Host(ip)相同、端口相同的條件，否則訪問(wèn)將被禁止，該訪問(wèn)也就被稱為跨域訪問(wèn)。
雖然跨域訪問(wèn)被禁止之后，可以在一定程度上提高了應(yīng)用的安全性，但也為開(kāi)發(fā)帶來(lái)了一定的麻煩。比如：我們開(kāi)發(fā)一個(gè)前后端分離的易用，頁(yè)面及js部署在一個(gè)主機(jī)的nginx服務(wù)中，后端接口部署在一個(gè)tomcat應(yīng)用容器中，當(dāng)前端向后端發(fā)起請(qǐng)求的時(shí)候一定是不符合同源策略的，也就無(wú)法訪問(wèn)。那么我們?nèi)绾谓鉀Q這個(gè)問(wèn)題？就是本文需要向大家說(shuō)明的內(nèi)容。
二、跨域訪問(wèn)的解決方案有哪些？
2.1.第一類方案：前端解決方案
雖然瀏覽器對(duì)于不符合同源策略的訪問(wèn)是禁止的，但是仍然存在例外的情況，如以下資源引用的標(biāo)簽不受同源策略的限制：
html的script標(biāo)簽 html的link標(biāo)簽 html的img標(biāo)簽 html的iframe標(biāo)簽：對(duì)于使用jsp、freemarker開(kāi)發(fā)的項(xiàng)目，這是實(shí)現(xiàn)跨域訪問(wèn)最常見(jiàn)的方法，
除了基于HTML本身的特性實(shí)現(xiàn)跨域訪問(wèn)，我們還可以使用jsonp、window的postMessage實(shí)現(xiàn)跨域訪問(wèn)。這些都是前端實(shí)現(xiàn)跨域訪問(wèn)的方式。
2.2.第二類方案：使用代理
實(shí)際上對(duì)跨域訪問(wèn)的支持在服務(wù)端實(shí)現(xiàn)起來(lái)更加容易，最常用的方法就是通過(guò)代理的方式，如：
nginx或haproxy代理跨域 nodejs中間件代理跨域
其實(shí)實(shí)現(xiàn)代理跨域的邏輯非常簡(jiǎn)單：就是在不同的資源服務(wù)：js資源、html資源、css資源、接口數(shù)據(jù)資源服務(wù)的前端搭建一個(gè)中間層，所有的瀏覽器及客戶端訪問(wèn)都通過(guò)代理轉(zhuǎn)發(fā)。所以在瀏覽器、客戶端看來(lái)，它們?cè)L問(wèn)的都是同一個(gè)ip、同一個(gè)端口的資源，從而符合同源策略實(shí)現(xiàn)跨域訪問(wèn)。
2.3 第三類方案：CORS
跨域資源共享（CORS）：通過(guò)修改Http協(xié)議header的方式，實(shí)現(xiàn)跨域。說(shuō)的簡(jiǎn)單點(diǎn)就是，通過(guò)設(shè)置HTTP的響應(yīng)頭信息，告知瀏覽器哪些情況在不符合同源策略的條件下也可以跨域訪問(wèn)，瀏覽器通過(guò)解析Http協(xié)議中的Header執(zhí)行具體判斷。具體的Header如下：
CROS跨域常用header
Access-Control-Allow-Origin: 允許哪些ip或域名可以跨域訪問(wèn)
Access-Control-Max-Age: 表示在多少秒之內(nèi)不需要重復(fù)校驗(yàn)該請(qǐng)求的跨域訪問(wèn)權(quán)限
Access-Control-Allow-Methods: 表示允許跨域請(qǐng)求的HTTP方法，如：GET,POST,PUT,DELETE
Access-Control-Allow-Headers: 表示訪問(wèn)請(qǐng)求中允許攜帶哪些Header信息，如： Accept 、 Accept-Language 、 Content-Language 、 Content-Type
三、SpringBoot下實(shí)現(xiàn)CORS的四種方式
為大家介紹四種實(shí)現(xiàn)CORS的方法，兩種是全局配置，兩種是局部接口生效的配置。一般來(lái)說(shuō)，SpringBoot項(xiàng)目采用其中一種方式實(shí)現(xiàn)CORS即可。
3.1.使用CorsFilter進(jìn)行全局跨域配置
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
//開(kāi)放哪些ip、端口、域名的訪問(wèn)權(quán)限，星號(hào)表示開(kāi)放所有域
config.addAllowedOrigin("*");
//是否允許發(fā)送Cookie信息
config.setAllowCredentials(true);
//開(kāi)放哪些Http方法，允許跨域訪問(wèn)
config.addAllowedMethod("GET","POST", "PUT", "DELETE");
//允許HTTP請(qǐng)求中的攜帶哪些Header信息
config.addAllowedHeader("*");
//暴露哪些頭部信息（因?yàn)榭缬蛟L問(wèn)默認(rèn)不能獲取全部頭部信息）
config.addExposedHeader("*");
//添加映射路徑，“/**”表示對(duì)所有的路徑實(shí)行全局跨域訪問(wèn)權(quán)限的設(shè)置
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
return new CorsFilter(configSource);
}
}
3.2. 重寫(xiě)WebMvcConfigurer的addCorsMappings方法（全局跨域配置）
@Configuration
public class GlobalCorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") //添加映射路徑，“/**”表示對(duì)所有的路徑實(shí)行全局跨域訪問(wèn)權(quán)限的設(shè)置
.allowedOrigins("*") //開(kāi)放哪些ip、端口、域名的訪問(wèn)權(quán)限
.allowCredentials(true) //是否允許發(fā)送Cookie信息
.allowedMethods("GET","POST", "PUT", "DELETE") //開(kāi)放哪些Http方法，允許跨域訪問(wèn)
.allowedHeaders("*") //允許HTTP請(qǐng)求中的攜帶哪些Header信息
.exposedHeaders("*"); //暴露哪些頭部信息（因?yàn)榭缬蛟L問(wèn)默認(rèn)不能獲取全部頭部信息）
}
};
}
}
3.3.使用CrossOrigin注解（局部跨域配置）
將CrossOrigin注解加在Controller層的方法上，該方法定義的RequestMapping端點(diǎn)將支持跨域訪問(wèn)
將CrossOrigin注解加在Controller層的類定義處，整個(gè)類所有的方法對(duì)應(yīng)的RequestMapping端點(diǎn)都將支持跨域訪問(wèn)
@RequestMapping("/cors")
@ResponseBody
@CrossOrigin(origins = "http://localhost:8080", maxAge = 3600)
public String cors( ){
return "cors";
}
3.4 使用HttpServletResponse設(shè)置響應(yīng)頭(局部跨域配置)
這種方式略顯麻煩，不建議在SpringBoot項(xiàng)目中使用。
@RequestMapping("/cors")
@ResponseBody
public String cors(HttpServletResponse response){
//使用HttpServletResponse定義HTTP請(qǐng)求頭，最原始的方法也是最通用的方法
response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
return "cors";
}
四、實(shí)現(xiàn)與測(cè)試
在SpringBoot 項(xiàng)目外 隨便定義一個(gè)HTML，并寫(xiě)代碼觸發(fā)如下的ajax代碼。（觸發(fā)過(guò)程我就不寫(xiě)了，定義一個(gè)按鈕加一個(gè)監(jiān)聽(tīng)函數(shù)即可）。以下是跨域AJAX請(qǐng)求驗(yàn)證的核心代碼：
$.ajax({
url: 'http://localhost:8090/cors',
type: "POST",
xhrFields: {
withCredentials: true //允許發(fā)送Cookie信息
},
success: function (data) {
alert("跨域請(qǐng)求配置成功")
},
error: function (data) {
alert("跨域請(qǐng)求配置失敗")
}
})
跨域請(qǐng)求配置成功表示：我們的跨域配置生效，ajax請(qǐng)求可以正確訪問(wèn)服務(wù)端接口。
跨域請(qǐng)求配置失敗表示：我們的跨域配置未生效，請(qǐng)參照檢查第三節(jié)檢查各項(xiàng)配置是否正確。
網(wǎng)站題目：SpringBoot跨域問(wèn)題解決方法
文章轉(zhuǎn)載：http://fisionsoft.com.cn/article/dpgicie.html
