什么是跨域
首先,我們需要了解一下一個(gè)URL是怎么組成的:
// 協(xié)議 + 域名(子域名 + 主域名) + 端口號(hào) + 資源地址
http: + // + www.baidu.com + :8080/
只要協(xié)議,子域名,主域名,端口號(hào)這四項(xiàng)組成部分中有一項(xiàng)不同,就可以認(rèn)為是不同的域,不同的域之間互相訪問資源,就被稱之為跨域。
隨著前后端分離開發(fā)的越來越普及,會(huì)經(jīng)常遇到跨域的問題,當(dāng)我們?cè)跒g覽器中看到這樣的錯(cuò)誤時(shí),就需要意識(shí)到遇到了跨域:
解決跨域的幾種方案首先,我們使用vue-cli來快速構(gòu)建一個(gè)前端項(xiàng)目,然后使用axios來向后臺(tái)發(fā)送ajax請(qǐng)求。然后在控制臺(tái)中打印出返回信息。這里就不再多做贅述,后面我會(huì)多帶帶寫一篇文章來講一下如何使用vue-cli快速創(chuàng)建一個(gè)vue項(xiàng)目。
這里不再講解使用jsonp的方式來解決跨域,因?yàn)?b>jsonp方式只能通過get請(qǐng)求方式來傳遞參數(shù),而且有一些不便之處。
下面的幾種方式都是通過跨域訪問技術(shù)CORS(Cross-Origin Resource Sharing)來解決的。具體的實(shí)現(xiàn)原理我們不做深入的探究,這節(jié)課的目的是解決跨域問題~
方法一:注解在Spring Boot 中給我們提供了一個(gè)注解@CrossOrigin來實(shí)現(xiàn)跨域,這個(gè)注解可以實(shí)現(xiàn)方法級(jí)別的細(xì)粒度的跨域控制。我們可以在類或者方添加該注解,如果在類上添加該注解,該類下的所有接口都可以通過跨域訪問,如果在方法上添加注解,那么僅僅只限于加注解的方法可以訪問。
@RestController @RequestMapping("/user") @CrossOrigin public class UserController { @Autowired private UserService userService; @RequestMapping("/findAll") public Object findAll(){ return userService.list(); } }
現(xiàn)在再去測(cè)試一下:
Bingo,成功!
方法二:實(shí)現(xiàn)WebMvcConfigurer這里可以通過實(shí)現(xiàn)WebMvcConfigurer接口中的addCorsMappings()方法來實(shí)現(xiàn)跨域。
@Configuration class CORSConfiguration implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**"); } }
下面我們將剛剛加上的注解給注釋掉,看看能不能訪問到這個(gè)接口:
不出我們所料,果然還是可以的~
方法三:Filter我們可以通過實(shí)現(xiàn)Fiter接口在請(qǐng)求中添加一些Header來解決跨域的問題:
@Component public class CORSFilter implements Filter { @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse res = (HttpServletResponse) response; res.addHeader("Access-Control-Allow-Credentials", "true"); res.addHeader("Access-Control-Allow-Origin", "*"); res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN"); if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) { response.getWriter().println("ok"); return; } chain.doFilter(request, response); } @Override public void destroy() { } @Override public void init(FilterConfig filterConfig) throws ServletException { } }
不出意外的話,應(yīng)該也可以在控制臺(tái)獲取到返回信息。
Nginx配置解決跨域問題如果我們?cè)陧?xiàng)目中使用了Nginx,可以在Nginx中添加以下的配置來解決跨域(原理其實(shí)和Filter類似,只不過把活兒丟給了運(yùn)維
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/75742.html
摘要:棧長得到消息,停止開發(fā)了。。。是一個(gè)輕量級(jí)的容錯(cuò)組件,其靈感來自于,主要為和函數(shù)式編程設(shè)計(jì)的看到這里,棧長表示學(xué)不動(dòng)了。。。上面說了,官方推薦替代的開源組件,這個(gè)棧長也沒有用過,查了下,資料也比較稀少。 showImg(https://segmentfault.com/img/remote/1460000017201104?w=1600&h=1066); 棧長得到消息,Hystrix ...
摘要:其簡(jiǎn)陋的頁面讓人不忍直視,但更新到系列后,像脫胎換骨一般好用這篇博客記錄我個(gè)人在使用過程中遇到過的坑,每個(gè)坑位都會(huì)附上詳細(xì)的填坑辦法環(huán)境參數(shù)服務(wù)直接注冊(cè)失敗常見的注冊(cè)失敗問題可以分為以下兩種服務(wù)端與客戶端不在同一臺(tái)服務(wù)器上提示安全校驗(yàn)不通過 Spring Boot Admin 1.x其簡(jiǎn)陋的頁面讓人不忍直視,但更新到2.x系列后,像脫胎換骨一般好用 這篇博客記錄我個(gè)人在使用Spring...
摘要:由于本人更習(xí)慣使用所以后續(xù)案例都是基于與,同時(shí)這里是基于最新的編寫的哦創(chuàng)建項(xiàng)目初次接觸,我們先來看看如何創(chuàng)建一個(gè)項(xiàng)目,這里以為例,其他的工具小伙伴們自行搜索創(chuàng)建方式。創(chuàng)建完項(xiàng)目后,各位小伙伴請(qǐng)認(rèn)真細(xì)心的對(duì)比下與傳統(tǒng)的工程有何區(qū)別如目錄結(jié)構(gòu)。 SpringBoot 是為了簡(jiǎn)化 Spring 應(yīng)用的創(chuàng)建、運(yùn)行、調(diào)試、部署等一系列問題而誕生的產(chǎn)物,自動(dòng)裝配的特性讓我們可以更好的關(guān)注業(yè)務(wù)本身...
摘要:前兩天組里的大佬心血來潮,讓我這周把項(xiàng)目里的版本升級(jí)到最新版本,目前項(xiàng)目用到的是版本為的版本為現(xiàn)在按照要求統(tǒng)一升級(jí)到。三數(shù)據(jù)庫連接池同樣也是版本不兼容,需要升級(jí)到,親測(cè)有效。差不多這些,后續(xù)遇到其他問題還會(huì)繼續(xù)補(bǔ)充。 前兩天組里的大佬心血來潮,讓我這周把項(xiàng)目里的spring-boot、spring-cloud版本升級(jí)到最新版本,目前項(xiàng)目用到的是spring-boot版本為1.5.9.R...
摘要:引入了新的環(huán)境和概要信息,是一種更揭秘與實(shí)戰(zhàn)六消息隊(duì)列篇掘金本文,講解如何集成,實(shí)現(xiàn)消息隊(duì)列。博客地址揭秘與實(shí)戰(zhàn)二數(shù)據(jù)緩存篇掘金本文,講解如何集成,實(shí)現(xiàn)緩存。 Spring Boot 揭秘與實(shí)戰(zhàn)(九) 應(yīng)用監(jiān)控篇 - HTTP 健康監(jiān)控 - 掘金Health 信息是從 ApplicationContext 中所有的 HealthIndicator 的 Bean 中收集的, Spring...
閱讀 1929·2021-09-14 18:03
閱讀 2325·2019-08-30 15:48
閱讀 1195·2019-08-30 14:09
閱讀 579·2019-08-30 12:55
閱讀 2795·2019-08-29 11:29
閱讀 1548·2019-08-26 13:43
閱讀 2371·2019-08-26 13:30
閱讀 2434·2019-08-26 12:17