springboot 跨域cors配置 原

springboot中通過cors協議解決跨域問題

 

1、對於前後端分離的項目來說，如果前端項目與後端項目部署在兩個不同的域下，那麼勢必會引起跨域問題的出現。

針對跨域問題，我們可能第一個想到的解決方案就是jsonp，並且以前處理跨域問題我基本也是這麼處理。

但是jsonp方式也同樣有不足，不管是對於前端還是後端來說，寫法與我們平常的ajax寫法不同，同樣後端也需要作出相應的更改。並且，jsonp方式只能通過get請求方式來傳遞參數，當然也還有其它的不足之處，針對於此，我並沒有急着使用jsonp的方式來解決跨域問題，去網上找尋其它方式，也就是本文主要所要講的，在springboot中通過cors協議解決跨域問題。

2、Cors協議

H5中的新特性：Cross-Origin Resource Sharing（跨域資源共享）。通過它，我們的開發者（主要指後端開發者）可以決定資源是否能被跨域訪問。

cors是一個w3c標準，它允許瀏覽器（目前ie8以下還不能被支持）像我們不同源的服務器發出xmlHttpRequest請求，我們可以繼續使用ajax進行請求訪問。

具體關於cors協議的文章 ，可以參考http://www.ruanyifeng.com/blog/2016/04/cors.html 這篇文章，講的相當不錯。

3、在springboot中如何通過cors協議解決跨域問題

springmvc4.2版本增加了對cors的支持。

目前我所做的項目基本都是springboot進行開發，所以我這裏貼下在springboot中的使用。

@Configuration
public class MyWebAppConfigurer extends WebMvcConfigurerAdapter{

    @Override
    public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/api/**")
           .allowedOrigins("*")
           .allowedMethods(RequestMethod.POST.name())
           .allowCredentials(true)
           .maxAge(60 * 30);
    }
}

上面這種是針對全局配置，如果你想做到更細緻也可以使用@CrossOrigin這個註解在controller類中使用。

@CrossOrigin(origins = "*", allowedHeaders = "*", allowCredentials = "true", maxAge = 60 * 30)
@PostMapping(value = "/v1/crossplatform/order/state", consumes = MediaType.APPLICATION_JSON_UTF8_VALUE, produces = "text/html;charset=UTF-8")

這樣就可以指定“/v1/crossplatform/order/state”’能處理跨域的請求了。

4、前端js代碼示例

$.ajax({
                url: 'http://10.82.13.116:8080/zlgxwl/v1/crossplatform/order/state',
                type: 'POST',
                contentType: "application/json",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                data: JSON.stringify(params),
                success: function (res) {          
                     
                }
            })

其中 withCredentials: true 表示瀏覽器會附帶Cookie信息給服務器 ；服務端的 allowCredentials = true ，兩個條件缺一不可，否則即使服務器同意發送Cookie，瀏覽器也無法獲取。