溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
有一次我的項目中采用了前后端分離的模式，引起了跨域問題，本文將介紹我所采用的跨域解決方法。
首先要了解產生跨域的本質，也就是同源策略的限制，源是指域名、端口號、協議，有一者不相同將被瀏覽器拒絕接受響應信息，（請求可以發送出去，但是瀏覽器不接受響應）。
解決方法：
1. jsonp
jsonp的原理的 src="" 屬性不受同源策略的限制，動態創建一個callback回調函數，服務器調用回調函數把數據放進去，具體的細節打算以后做一個專門講解。
這里給一個模版:
$.ajax({
type: "get", //jsonp只能使用get
async: false,
url: ""
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"message", //注意這里給回調函數起的名字
success: function(json){
}
})
如果這里你的回調函數起名為message，那么你在后端返回json的時候，也要注意在最外面包一層message{}。
這里jsonp的確定也可以明顯的看出，只支持get請求，原因就是因為通過src=“”發送請求，所以可以知道是url傳參。
那么jsonp的好處是什么呢，兼容性，幾乎所有瀏覽器都支持（包括一些版本比較老的），不需要XMLHttpRequest或ActiveX的支持。
2. cors
又稱跨域訪問，瀏覽器將cors請求分為簡單請求和非簡單請求，因為本文主要講解具體的方法，所以關于細節部分有興趣可以去看其他博客或者我以后再做一篇具體的講解（和jsonp一起）。在springboot中，官方已經提供了支持。直接貼代碼：
方式一：全局定義
@Configuration
public class CorsConfig implements WebMvcConfigurer {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
List<String> list = new ArrayList<>();
list.add("*");
corsConfiguration.setAllowedOrigins(list);
/*
// 請求常用的三種配置，*代表允許所有，當時你也可以自定義屬性
（比如header只能帶什么，只能是post方式等等）
*/
corsConfiguration.addAllowedOrigin("*"); //支持的源
corsConfiguration.addAllowedHeader("*"); //header限制
corsConfiguration.addAllowedMethod("*"); //支持方法
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source
= new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
方式二：局部定義
@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "",methods = {})
直接在需要跨域的方法上添加注解，不過我沒試過，有興趣或者有這種方式需求的朋友可以嘗試一下。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
