快捷導(dǎo)航

springboot解決前后端分離時(shí)的跨域問(wèn)題

更新時(shí)間：2021年04月24日 09:06:26 作者：凡繁煩

這篇文章主要介紹了springboot如何解決前后端分離時(shí)的跨域問(wèn)題，幫助大家更好的理解和學(xué)習(xí)使用springboot，感興趣的朋友可以了解下

我們知道，http請(qǐng)求都是無(wú)狀態(tài)，現(xiàn)在比較流行的都是jwt的形式處理無(wú)狀態(tài)的請(qǐng)求，在請(qǐng)求頭上帶上認(rèn)證參數(shù)（token等），前后端分離有好處，也有壞處，第一次開(kāi)發(fā)前后端分離項(xiàng)目的人，肯定會(huì)遇到前端請(qǐng)求跨域的問(wèn)題，這個(gè)怎么處理呢?在說(shuō)處理方案前，有必要說(shuō)明一下為什么會(huì)跨域和什么是跨域？

一、為什么會(huì)跨域？

出于瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響?？梢哉f(shuō)Web是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。同源策略會(huì)阻止一個(gè)域的javascript腳本和另外一個(gè)域的內(nèi)容進(jìn)行交互。所謂同源（即指在同一個(gè)域）就是兩個(gè)頁(yè)面具有相同的協(xié)議（protocol），主機(jī)（host）和端口號(hào)（port）

二、什么是跨域？

當(dāng)一個(gè)請(qǐng)求url的協(xié)議、域名、端口三者之間任意一個(gè)與當(dāng)前頁(yè)面url不同即為跨域

當(dāng)前頁(yè)面url	被請(qǐng)求頁(yè)面url	是否跨域	原因
https://www.52fansite.com/	https://www.52fansite.com/index.html	否	同源（協(xié)議、域名、端口號(hào)相同）
https://www.52fansite.com/	http://www.52fansite.com/index.html	是	協(xié)議不同（https/http）
https://www.52fansite.com/	https://www.baidu.com/	是	主域名不同（52fansite/baidu）
https://www.52fansite.com/	https://layui.52fansite.com/	是	子域名不同（www/layui）
https://www.52fansite.com:8080/	https://www.52fansite.com:8081/	是	同源（協(xié)議、域名、端口號(hào)相同）

三、處理跨域

1、在controller的類上或方法上添加注解

1.1類上加注解

@RestController
@CrossOrigin(origins = "*")
public class CorsController {

    @GetMapping("/cors")
    public String testCors() {
        return "success";
    }
}

1.2方法上加注解

@RestController
public class CorsController {

    @CrossOrigin(origins = "*")
    @GetMapping("/cors")
    public String testCors() {
        return "success";
    }
}

2、在啟動(dòng)類配置全局cors(springboot2.0已經(jīng)過(guò)時(shí))

@SpringBootApplication
public class Application {

 public static void main(String[] args) {
  SpringApplication.run(Application.class, args);
 }

 @Bean
 public WebMvcConfigurer corsConfigurer() {
  return new WebMvcConfigurerAdapter() {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/*").allowedOrigins("*");
   }
  };
 }
}

替換為

@SpringBootApplication
public class Application {

 public static void main(String[] args) {
  SpringApplication.run(Application.class, args);
 }

 @Bean
 public WebMvcConfigurer corsConfigurer() {
  return new WebMvcConfigurer() {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/*").allowedOrigins("*");
   }
  };
 }
}

3、注冊(cè)corsFilter

@Configuration
public class CorsConfig {
    
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

以上就是springboot解決前后端分離時(shí)的跨域問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于springboot解決跨域的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: