Java中跨域問題解決的幾種方式舉例詳解

更新時間：2024年12月25日 11:13:05 作者：A_aspectJ項目開發(fā)

這篇文章主要介紹了前后端分離項目中跨域問題的解決方法,包括設置響應頭信息、使用iframe、WebSocket、HttpServletResponse添加頭信息以及通過配置類等多種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在前后端分離項目中,經常會遇到跨域問題,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下，一起來看看吧~

什么是跨域

當一個請求的url的協(xié)議、域名、端口任意一個與當前頁面的url不同即為跨域。

比如 a頁面想獲取b頁面的資源，a與b頁面的協(xié)議、域名或端口號不同，進行的訪問行為都是跨域，由于瀏覽器的同源策略，會限制跨域請求資源。

同源策略由 Netscape 公司引入瀏覽器。目前，所有瀏覽器都實行這個政策。最初，它的含義是指，A網頁設置的 Cookie，B網頁不能打開，除非這兩個網頁"同源"。所謂"同源"指的是"三個相同"：

協(xié)議相同
域名相同
端口相同

同源策略確保一個應用中的資源只能被本應用的資源訪問。

非同源限制

cookie、localStorage、indexDB無法讀取
DOM和js對象無法獲取
無法發(fā)送Ajax請求

Java 中的跨域問題指的是在使用 Ajax 技術進行跨域訪問時，由于瀏覽器的安全限制，導致請求被拒絕或者無法獲取到正確的響應結果。

解決 Java 中的跨域問題可以采用以下幾種方式：

1、通過設置響應頭信息來支持跨域訪問。

在 Java 中可以通過設置響應頭信息來支持跨域訪問，例如在 Spring MVC 中可以使用

//@CrossOrigin 注解來設置允許跨域訪問的源地址：
@CrossOrigin(origins = "http://localhost:8080")
@RequestMapping("/api")
@RestController
public class ApiController {
    // ...
}

2、使用 iframe 來實現跨域訪問。

可以通過在同一頁面中使用 iframe 元素來實現跨域訪問，從而避免了瀏覽器安全限制。例如在前端頁面中可以通過以下方式來獲取來自不同域名的數據：

var iframe = document.createElement('iframe');
iframe.src = 'http://exampleURL.com/data';
iframe.style.display = 'none';
document.body.appendChild(iframe);
var data = iframe.contentWindow.document.body.innerText;
console.log(data);

或前端發(fā)送ajax請求

    $("#test").click(function(){
        $.ajax({
            url : "http://localhost:8082/hello.cors",
            type : "GET",
            success : function(result){
                // alert(result);
                console.log(result)
            }
        })
    })

3、使用 WebSocket 來解決跨域問題。

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/data").setAllowedOrigins("*");
    }
}

4、HttpServletResponse添加頭信息

@RestController
public class CorsController {
?
    @RequestMapping(value = "/hello.cors")
    public String hello(HttpServletResponse response){
        response.addHeader("Access-Control-Allow-Origin","http://localhost:8081");
        //response.addHeader("Access-Control-Allow-Credentials","true");
        return "hello cors";
    }
    
}

5、通過配置類解決跨域

使用HttpServletResponse對象或注解方式，需要在每個需要跨域的方法上都加上相應的注解或參數，我們想讓所有的controller都添加跨域功能，我們可以通過實現WebMvcConfigurer接口來自定義跨域配置。

WebMvcConfigurer是一個接口，提供很多自定義的攔截器，例如跨域設置、類型轉化器等springMVC的配置

@Configuration
public class CorsConfig implements WebMvcConfigurer {
?
    /**
     * **addMapping**：配置可以被跨域的路徑，可以任意配置，可以具體到直接請求路徑。
     *
     * **allowedMethods**：允許所有的請求方法訪問該跨域資源服務器，如：POST、GET、PUT、DELETE等。
     *
     * **allowedOrigins**：允許所有的請求域名訪問我們的跨域資源，可以固定單條或者多條內容，如：”[http://www.address.com](http://www.address.com/)“，只有該域名可以訪問我們的跨域資源。
     *
     * **allowedHeaders**：允許所有的請求header訪問，可以自定義設置任意請求頭信息。
     
     * @param registry
     */
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/*.cors")
                .allowedOrigins("http://localhost:8081")
                .allowedMethods("POST","GET")
                .maxAge(1000);
    }
}