spring boot:解決cors跨域問題的兩種方法(spring boot 2.3.2)

本文轉載自查看原文 2020-08-07 15:54 1443 spring/ spring boot/ cors/ java/ 瀏覽器/ 域名/ 跨域/ js/ javascript/ 同源

一，什么是CORS？

1，CORS（跨域資源共享）（CORS，Cross-origin resource sharing）,

它是一個 W3C 標准中瀏覽器技術的規范，

它允許瀏覽器向非同一個域的服務器發送XMLHttpRequest請求，

避免了Ajax只能在同一個域的服務器下使用的限制

2，什么是跨域問題？

跨域問題指的是瀏覽器不能執行其他網站的腳本.

它是由瀏覽器的同源策略造成的,因為瀏覽器對javascript施加有安全限制.

當前所有的瀏覽器都實行同源策略,所謂的同源指的是

協議相同
域名相同
端口相同

瀏覽器執行javascript腳本時,會檢查這個腳本屬於哪個頁面,

如果不是同源頁面,就不會被執行.

說明：如果是指向相同ip的域名，也會被認為是跨域，例如：

127.0.0.1 和 localhost，也會被瀏覽器認為發生了跨域

3,允許跨域時瀏覽器的返回信息:

可以看到其中的:Access-Control-Allow-Origin: http://127.0.0.1:1999

禁止跨域時瀏覽器的返回信息:

4，在生產環境中要注意的地方：

互聯網搜索到的很多例子直接允許所有的域訪問所有的路徑，

這是絕對不能做的，

因為在互聯網上被這樣訪問會引發安全問題

必須指定明確的路徑和明確的域

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/

說明：作者:劉宏締郵箱: 371125307@qq.com

二，演示項目的說明

1,項目地址:

https://github.com/liuhongdi/corsconfig

2,項目功能說明：

演示了兩種解決cors問題的方法：

WebMvcConfigurer配置

@CrossOrigin注解

3，項目結構；如圖:

三，java代碼說明

1,CorsConfig.java

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    //指定允許跨域的多個域
    private static final String[] ALLOWED_ORIGINS = {"http://www.baidu.com","http://127.0.0.1:81","https://blog.csdn.net"};
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        //添加跨域的cors配置
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/goods/**").   //可以被跨域的路徑,/**表示無限制,
                        allowedOrigins(ALLOWED_ORIGINS). //允許跨域的域名，如果值為*,則表示允許任何域名使用
                        allowedMethods("*"). //允許任何方法，值可以為： "GET", "POST" ...
                        allowedHeaders("*"). //允許任何請求頭
                        allowCredentials(true). //允許帶cookie信息
                        exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L); //maxAge(3600):表示3600秒內，不需要再發送預檢驗請求，是結果可以緩存的時長
            }
        };
    }
}

說明：用addCorsMapping方法添加對跨域路徑/允許跨域的域名等的規則

2,HomeController.java

@RestController
@RequestMapping("/home")
public class HomeController {
    //允許跨域多個值
    @CrossOrigin(origins = {"http://127.0.0.1:1999","http://cas.baidu.com","http://do.baidu.com"},maxAge = 3600)
    @GetMapping
    @RequestMapping("/home")
    public String home() {
        return "this is /home/home";
    }

    //允許跨域,只有一個域
    //只寫@CrossOrigin 表示允許所有域訪問
    @CrossOrigin("http://127.0.0.1:1999")
    @GetMapping
    @RequestMapping("/index")
    public String index() {
        return "this is /home/index";
    }
}

演示用@CrossOrigin注解為指定的方法或類來指定跨域的規則

3,GoodsController.java

@RestController
@RequestMapping("/goods")
public class GoodsController {
    @GetMapping
    @RequestMapping("/one")
    public String one() {
        return "this is /goods/one";
    }
}

供測試用，CorsConfig.java中配置了它的跨域規則

四, javascript代碼說明

1,page81.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title >標題</title>
    <meta charset="utf-8" />
    <script type="text/javascript" language="JavaScript" src="/jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="content" style="width:800px;">
    <div style="width:250px;float:left;font-size: 16px;" ></div>
    <div style="width:550px;float:left;">
       <!--====================main begin=====================-->
        <a href="javascript:get_home()" >訪問8080:/home/home</a><br/>
       <a href="javascript:get_goods()" >訪問8080:/goods/one</a>
        <!--====================main   end=====================-->
    </div>
</div>

<script>
//訪問8080:/goods/one
function get_goods(){
        $.ajax({
            type:"GET",
            url:"http://127.0.0.1:8080/goods/one",
            //返回數據的格式
            datatype: "text",//"xml", "html", "script", "json", "jsonp", "text".
            processData: false,
            contentType: false,
            //成功返回之后調用的函數
            success:function(data){
                alert(data);
            },
            //調用執行后調用的函數
            complete: function(XMLHttpRequest, textStatus){
            },
            //調用出錯執行的函數
            error:function(jqXHR,textStatus,errorThrown){
               console.log(jqXHR);
               console.log(textStatus);
               console.log(errorThrown);
               }
        });
    }

   //訪問8080:/home/home
    function get_home(){
        $.ajax({
            type:"GET",
            url:"http://127.0.0.1:8080/home/home",
            //返回數據的格式
            datatype: "text",//"xml", "html", "script", "json", "jsonp", "text".
            processData: false,
            contentType: false,
            //成功返回之后調用的函數
            success:function(data){
                alert(data);
            },
            //調用執行后調用的函數
            complete: function(XMLHttpRequest, textStatus){
            },
            //調用出錯執行的函數
            error:function(jqXHR,textStatus,errorThrown){
               console.log(jqXHR);
               console.log(textStatus);
               console.log(errorThrown);
               }
        });
    }
</script>
</body>
</html>

說明：把這個頁面放到本地端口為81的域下

2,page1999.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title >標題</title>
    <meta charset="utf-8" />
    <script type="text/javascript" language="JavaScript" src="/jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="content" style="width:800px;">
    <div style="width:250px;float:left;font-size: 16px;" ></div>
    <div style="width:550px;float:left;">
       <!--====================main begin=====================-->
        <a href="javascript:get_index()" >訪問8080:/home/index</a><br/>
       <a href="javascript:get_home()" >訪問8080:/home/home</a><br/>
       <a href="javascript:get_goods()" >訪問8080:/goods/one</a>
        <!--====================main   end=====================-->
    </div>
</div>
<script>
   //訪問8080:/goods/one
    function get_goods(){
        $.ajax({
            type:"GET",
            url:"http://127.0.0.1:8080/goods/one",
            //返回數據的格式
            datatype: "text",//"xml", "html", "script", "json", "jsonp", "text".
            processData: false,
            contentType: false,
            //成功返回之后調用的函數
            success:function(data){
                alert(data);
            },
            //調用執行后調用的函數
            complete: function(XMLHttpRequest, textStatus){
            },
            //調用出錯執行的函數
            error:function(jqXHR,textStatus,errorThrown){
               console.log(jqXHR);
               console.log(textStatus);
               console.log(errorThrown);
               }
        });
    }
   //訪問8080:/home/index
    function get_index(){
        $.ajax({
            type:"GET",
            url:"http://127.0.0.1:8080/home/index",
            //返回數據的格式
            datatype: "text",//"xml", "html", "script", "json", "jsonp", "text".
            processData: false,
            contentType: false,
            //成功返回之后調用的函數
            success:function(data){
                alert(data);
            },
            //調用執行后調用的函數
            complete: function(XMLHttpRequest, textStatus){
            },
            //調用出錯執行的函數
            error:function(jqXHR,textStatus,errorThrown){
               console.log(jqXHR);
               console.log(textStatus);
               console.log(errorThrown);
               }
        });
    }
       //訪問8080:/home/home
        function get_home(){
        $.ajax({
            type:"GET",
            url:"http://127.0.0.1:8080/home/home",
            //返回數據的格式
            datatype: "text",//"xml", "html", "script", "json", "jsonp", "text".
            processData: false,
            contentType: false,
            //成功返回之后調用的函數
            success:function(data){
                alert(data);
            },
            //調用執行后調用的函數
            complete: function(XMLHttpRequest, textStatus){
            },
            //調用出錯執行的函數
            error:function(jqXHR,textStatus,errorThrown){
               console.log(jqXHR);
               console.log(textStatus);
               console.log(errorThrown);
               }
        });
    }
</script>
</body>
</html>

說明：把這個頁面放到本地端口為1999的域下

五，效果測試

1,訪問:

http://127.0.0.1:1999/page1999.html

效果:

測試可以發現:

/home/index,/home/home允許訪問，

而/goods/one不允許訪問,因為沒有允許從127.0.0.1:1999訪問到8080的java項目的規則

2,訪問:

http://127.0.0.1:81/page81.html

效果：

可以測試發現：

訪問到 /goods/one沒有問題，

訪問到/home/home會報錯，

因為沒有允許從127.0.0.1:81訪問到8080的java項目的規則

六，查看spring boot版本

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.3.2.RELEASE)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 spring boot 解決跨域的兩種方法 -- 前后端分離 Spring Boot中通過CORS解決跨域問題解決跨域的兩種方法JSONP/CORS 九、Spring Boot 優雅的實現CORS跨域 spring boot允許跨域（CORS）的配置 Spring Boot 通過CORS實現跨域 Spring Boot2 系列教程(十四)CORS 解決跨域問題 spring boot 設置文件上傳大小的兩種方法 spring boot / cloud (六) 開啟CORS跨域訪問 Spring Boot 2中對於CORS跨域訪問的快速支持