SpringBoot解決CORS跨域（@CrossOrigin）

阿新 • • 發佈：2019-01-14

一、關於跨域介紹

在前後分離的架構下，跨域問題難免會遇見比如，站點 http://domain-a.com 的某 HTML 頁面通過的 src 請求 http://domain-b.com/image.jpg。網路上的許多頁面都會載入來自不同域的CSS樣式表，影象和指令碼等資源。

出於安全原因，瀏覽器限制從指令碼內發起的跨源HTTP請求。例如，XMLHttpRequest和Fetch API遵循同源策略。這意味著使用這些API的Web應用程式只能從載入應用程式的同一個域請求HTTP資源，除非使用CORS標頭檔案。

二、Spring Boot跨域(@CrossOrigin)

當然這裡雖然指SpringBoot但是SpringMVC也是一樣的，要求在Spring4.2及以上的版本

1、@CrossOrigin使用場景要求

jdk1.8+
Spring4.2+

2、@CrossOrigin原始碼解析(翻譯參考網路，文末列出參考地址)

@Target({ ElementType.METHOD, ElementType.TYPE })
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {

    String[] DEFAULT_ORIGINS = { "*" };

    String[] DEFAULT_ALLOWED_HEADERS = { "*" 
 };

    boolean DEFAULT_ALLOW_CREDENTIALS = true;

    long DEFAULT_MAX_AGE = 1800;


    /**
     * 同origins屬性一樣
     */
    @AliasFor("origins")
    String[] value() default {};

    /**
     * 所有支援域的集合，例如"http://domain1.com"。
     * <p>這些值都顯示在請求頭中的Access-Control-Allow-Origin
     * "*"代表所有域的請求都支援
     * <p>如果沒有定義，所有請求的域都支援
     * @see 
 #value
     */
    @AliasFor("value")
    String[] origins() default {};

    /**
     * 允許請求頭重的header，預設都支援
     */
    String[] allowedHeaders() default {};

    /**
     * 響應頭中允許訪問的header，預設為空
     */
    String[] exposedHeaders() default {};

    /**
     * 請求支援的方法，例如"{RequestMethod.GET, RequestMethod.POST}"}。
     * 預設支援RequestMapping中設定的方法
     */
    RequestMethod[] methods() default {};

    /**
     * 是否允許cookie隨請求傳送，使用時必須指定具體的域
     */
    String allowCredentials() default "";

    /**
     * 預請求的結果的有效期，預設30分鐘
     */
    long maxAge() default -1;

}

3、@CrossOrigin使用

Spring Boot下的請求處理控制器

package com.example.demo.controller;

import com.example.demo.domain.User;
import com.example.demo.service.IUserFind;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**
 * @Title: UserController
 * @ProjectName demo
 * @Description: 請求處理控制器
 * @author 淺然
 * @date 2018/7/2022:18
**/
@RestController
//實現跨域註解
//origin="*"代表所有域名都可訪問
//maxAge飛行前響應的快取持續時間的最大年齡，簡單來說就是Cookie的有效期 單位為秒
//若maxAge是負數,則代表為臨時Cookie,不會被持久化,Cookie資訊儲存在瀏覽器記憶體中,瀏覽器關閉Cookie就消失
@CrossOrigin(origins = "*",maxAge = 3600)
public class UserController {
    @Resource
    private IUserFind userFind;

    @GetMapping("finduser")
    public User finduser(@RequestParam(value="id") Integer id){
        //此處省略相應程式碼
    }
}

後臺返回的資料

這裡寫圖片描述

前端跨域請求

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>demo</title>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
    </head>
    <body>
        <input type="button" value="測試" onclick="ajaxloding()" />
        <div id="usermessage"></div>
        <script>
            var getdata=0;
            function ajaxloding(){
                $.ajax({
                    async:false,
                    type:"get",
                    url:"http://localhost:8080/api/finduser?id=1",
                    contentType: "application/x-www-form-urlencoded",
                    dataType: "json",
                    data: {},
                    success:function(result){
                        getdata=result.name
                    },
                    error: function (errorMsg) {
                        //請求失敗時執行該函式
                        alert("請求資料失敗!");
                    }
                });
                $("#usermessage").text(getdata)
            }
        </script>
    </body>
</html>

這樣就解決了跨域問題，獲取了後臺的資料

這裡寫圖片描述

SpringBoot解決CORS跨域（@CrossOrigin）

一、關於跨域介紹

二、Spring Boot跨域(@CrossOrigin)

1、@CrossOrigin使用場景要求

2、@CrossOrigin原始碼解析(翻譯參考網路，文末列出參考地址)

3、@CrossOrigin使用

參考

SpringBoot解決CORS跨域（@CrossOrigin）

SpringBoot解決cors跨域問題

cors跨域（以及和jsonp的區別）

json跨域（2）----js跨域及解決方案

ajax跨域（轉）

跨域（my）

Ajax跨域（CROS）請求中的Preflighted requests

Spring MVC 解決CORS跨域問題

java配置跨域springboot配置Cors跨域

SpringBoot解決ajax跨域問題(轉載)

SpringBoot解決ajax跨域問題

canvas 圖片跨域（一）

SpringBoot配置CORS跨域訪問

Ajax跨域（jsonp）呼叫JAVA後臺

Web API中使用CORS解決跨域（暫存）

java服務端解決js跨域的問題 CORS（跨域資源共享）的配置

4、CORS跨域請求限制與解決（預請求）

我也說說Nginx解決前端跨域問題，正確的Nginx跨域配置（後端Nginx CORS跨域配置、CORS設定，後端允許跨域請求）

SpringBoot學習（3）-SpringBoot新增支援CORS跨域訪問

如何解決ajax跨域問題（轉）

SpringBoot解決CORS跨域（@CrossOrigin）

一、關於跨域介紹

二、Spring Boot跨域(@CrossOrigin)

1、@CrossOrigin使用場景要求

2、@CrossOrigin原始碼解析(翻譯參考網路，文末列出參考地址)

3、@CrossOrigin使用

參考

相關推薦