快捷導(dǎo)航

Java中跨域問(wèn)題解決的幾種方式舉例詳解

更新時(shí)間：2024年12月25日 11:13:05 作者：A_aspectJ項(xiàng)目開(kāi)發(fā)

這篇文章主要介紹了前后端分離項(xiàng)目中跨域問(wèn)題的解決方法,包括設(shè)置響應(yīng)頭信息、使用iframe、WebSocket、HttpServletResponse添加頭信息以及通過(guò)配置類(lèi)等多種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言
1、通過(guò)設(shè)置響應(yīng)頭信息來(lái)支持跨域訪問(wèn)。
2、使用 iframe 來(lái)實(shí)現(xiàn)跨域訪問(wèn)。
3、使用 WebSocket 來(lái)解決跨域問(wèn)題。
4、HttpServletResponse添加頭信息
5、通過(guò)配置類(lèi)解決跨域
總結(jié)

前言

在前后端分離項(xiàng)目中,經(jīng)常會(huì)遇到跨域問(wèn)題,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下，一起來(lái)看看吧~

什么是跨域

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

比如 a頁(yè)面想獲取b頁(yè)面的資源，a與b頁(yè)面的協(xié)議、域名或端口號(hào)不同，進(jìn)行的訪問(wèn)行為都是跨域，由于瀏覽器的同源策略，會(huì)限制跨域請(qǐng)求資源。

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

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

同源策略確保一個(gè)應(yīng)用中的資源只能被本應(yīng)用的資源訪問(wèn)。

非同源限制

cookie、localStorage、indexDB無(wú)法讀取
DOM和js對(duì)象無(wú)法獲取
無(wú)法發(fā)送Ajax請(qǐng)求

Java 中的跨域問(wèn)題指的是在使用 Ajax 技術(shù)進(jìn)行跨域訪問(wèn)時(shí)，由于瀏覽器的安全限制，導(dǎo)致請(qǐng)求被拒絕或者無(wú)法獲取到正確的響應(yīng)結(jié)果。

解決 Java 中的跨域問(wèn)題可以采用以下幾種方式：

1、通過(guò)設(shè)置響應(yīng)頭信息來(lái)支持跨域訪問(wèn)。

在 Java 中可以通過(guò)設(shè)置響應(yīng)頭信息來(lái)支持跨域訪問(wèn)，例如在 Spring MVC 中可以使用

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

2、使用 iframe 來(lái)實(shí)現(xiàn)跨域訪問(wèn)。

可以通過(guò)在同一頁(yè)面中使用 iframe 元素來(lái)實(shí)現(xiàn)跨域訪問(wèn)，從而避免了瀏覽器安全限制。例如在前端頁(yè)面中可以通過(guò)以下方式來(lái)獲取來(lái)自不同域名的數(shù)據(jù)：

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請(qǐng)求

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

3、使用 WebSocket 來(lái)解決跨域問(wèn)題。

@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、通過(guò)配置類(lèi)解決跨域

使用HttpServletResponse對(duì)象或注解方式，需要在每個(gè)需要跨域的方法上都加上相應(yīng)的注解或參數(shù)，我們想讓所有的controller都添加跨域功能，我們可以通過(guò)實(shí)現(xiàn)WebMvcConfigurer接口來(lái)自定義跨域配置。

WebMvcConfigurer是一個(gè)接口，提供很多自定義的攔截器，例如跨域設(shè)置、類(lèi)型轉(zhuǎn)化器等springMVC的配置

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