快捷導(dǎo)航

Spring Boot 2.X優(yōu)雅的解決跨域問題

更新時(shí)間：2019年03月20日 15:49:22 作者：java_lover

這篇文章主要給大家介紹了關(guān)于Spring Boot 2.X如何優(yōu)雅的解決跨域問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Spring Boot 2.X具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

一、什么是源和跨域

源（origin）就是協(xié)議、域名和端口號(hào)。

URL由協(xié)議、域名、端口和路徑組成，如果兩個(gè)URL的協(xié)議、域名和端口全部相同，則表示他們同源。否則，只要協(xié)議、域名、端口有任何一個(gè)不同，就是跨域。

對(duì)https://www.baidu.com/index.html進(jìn)行跨域比較：

URL	是否跨域	原因
https://www.baidu.com/more/index.html	不跨域	三要素相同
https://map.baidu.com/	跨域	域名不同
http://www.baidu.com/index.html	跨域	協(xié)議不同
https://www.baidu.com:81/index.html	跨域	端口號(hào)不同

隨著前后端分離開發(fā)的越來越普及，會(huì)經(jīng)常遇到跨域的問題，當(dāng)我們?cè)跒g覽器中看到這樣的錯(cuò)誤時(shí)，就需要意識(shí)到遇到了跨域：

二、什么是同源策略？

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響。可以說Web是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。

同源策略又分為以下兩種：

DOM同源策略：禁止對(duì)不同源頁(yè)面DOM 進(jìn)行操作。這里主要場(chǎng)景是iframe跨域的情況，不同域名的iframe是限制互相訪問的。
XMLHttpRequest同源策略：禁止使用XHR對(duì)象向不同源的服務(wù)器地址發(fā)起HTTP請(qǐng)求。

三、Spring Boot跨域解決方案

本例使用Spring Boot 2.1.2.RELEASE演示，分別用8080和8081端口啟動(dòng)，部分代碼如下：

跨域頁(yè)面：testOtherDomain.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>不同域名-Java碎碎念</title>
</head>
<body>
<button id="b1">點(diǎn)我測(cè)試</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
 $("#b1").click(function () {
  $.ajax({
   url: "http://localhost:8081/hello",
   type: "post",
   success:function (res) {
    console.log(res);
   }
  })
 });
</script>
</body>
</html>

接口類：HelloController

package com.example.helloSpringBoot.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
 @RequestMapping("/hello")
 public String HelloSpring (){
  return "hello Java碎碎念！";
 }
}

未解決跨域前運(yùn)行截圖：

在Spring Boot 2.X應(yīng)用程序中可以使用注解@CrossOrigin，也可以通過使用WebMvcConfigurer對(duì)象來定義全局CORS配置。

1、@CrossOrigin注解示例代碼

package com.example.helloSpringBoot.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

 @CrossOrigin
 @RequestMapping("/hello")
 public String HelloSpring (){
  return "hello Java碎碎念！";
 }
}

2. WebMvcConfigurer對(duì)象示例代碼

package com.example.helloSpringBoot.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyConfiguration {
 @Bean
 public WebMvcConfigurer corsConfigurer() {
  return new WebMvcConfigurer() {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/*")
       .allowedOrigins("*")
       .allowCredentials(true)
       .allowedMethods("GET", "POST", "DELETE", "PUT","PATCH")
       .maxAge(3600);
   }
  };
 }
}

按照上面兩種方式的一種配置完成后，即可實(shí)現(xiàn)對(duì)跨域的支持，運(yùn)行成功截圖如下：