SpringMvc解決js跨域

原文:https://my.oschina.net/wangnian/blog/689020
前言:

跨站 HTTP 請求(Cross-site HTTP request)是指發(fā)起請求的資源所在域不同于該請求所指向資源所在的域的 HTTP 請求。比如說,域名A(http://domaina.example)的某 Web 應(yīng)用程序中通過標簽引入了域名B(http://domainb.foo)站點的某圖片資源(http://domainb.foo/image.jpg),域名A的那 Web 應(yīng)用就會導致瀏覽器發(fā)起一個跨站 HTTP 請求。在當今的 Web 開發(fā)中,使用跨站 HTTP 請求加載各類資源(包括CSS、圖片、JavaScript 腳本以及其它類資源),已經(jīng)成為了一種普遍且流行的方式。

正如大家所知,出于安全考慮,瀏覽器會限制腳本中發(fā)起的跨站請求。比如,使用 XMLHttpRequest 對象發(fā)起 HTTP 請求就必須遵守同源策略(same-origin policy)。 具體而言,Web 應(yīng)用程序能且只能使用 XMLHttpRequest 對象向其加載的源域名發(fā)起 HTTP 請求,而不能向任何其它域名發(fā)起請求。為了能開發(fā)出更強大、更豐富、更安全的Web應(yīng)用程序,開發(fā)人員渴望著在不丟失安全的前提下,Web 應(yīng)用技術(shù)能越來越強大、越來越豐富。比如,可以使用 XMLHttpRequest 發(fā)起跨站 HTTP 請求。(這段描述跨域不準確,跨域并非瀏覽器限制了發(fā)起跨站請求,而是跨站請求可以正常發(fā)起,但是返回結(jié)果被瀏覽器攔截了。最好的例子是crsf跨站攻擊原理,請求是發(fā)送到了后端服務(wù)器無論是否跨域!注意:有些瀏覽器不允許從HTTPS的域跨域訪問HTTP,比如Chrome和Firefox,這些瀏覽器在請求還未發(fā)出的時候就會攔截請求,這是一個特例。)

方法一 設(shè)置返回的Response跨域,適合所有服務(wù)端

普通參數(shù)跨域設(shè)置

在response的頭文件添加

httpServletResponse.setHeader("Access-Control-Allow-Origin","*");
httpServletResponse.setHeader("Access-Control-Allow-Methods","POST");
httpServletResponse.setHeader("Access-Control-Allow-Headers","Access-Control");
httpServletResponse.setHeader("Allow","POST");

Access-Control-Allow-Origin:| * // 授權(quán)的源控制
Access-Control-Max-Age:// 授權(quán)的時間
Access-Control-Allow-Credentials: true | false // 控制是否開啟與Ajax的Cookie提交方式
Access-Control-Allow-Methods:[,]* // 允許請求的HTTP Method
Access-Control-Allow-Headers:[,]* // 控制哪些header能發(fā)送真正的請求

觀察響應(yīng)頭

image.png

帶headr請求跨域設(shè)置

這樣客戶端需要發(fā)起 OPTIONS請求, 可以說是一個“預請求”,用于探測后續(xù)真正需要發(fā)起的跨域 POST 請求對于服務(wù)器來說是否是安全可接受的,因為跨域提交數(shù)據(jù)對于服務(wù)器來說可能存在很大的安全問題。

因為Springmvc模式是掛壁OPTIONS請求的,所以需要開啟

<servlet>    
   <servlet-name>application</servlet-name>    
   <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
   <init-param>  
        <param-name>dispatchOptionsRequest</param-name>  
        <param-value>true</param-value>  
   </init-param>    
   <load-on-startup>1</load-on-startup>    
</servlet>    

方法二 使用Spring MVC(4.2以上) 跨域

Spring MVC 從4.2版本開始增加了對CORS的支持,在spring MVC 中增加CORS支持非常簡單,可以配置全局的規(guī)則,也可以使用@CrossOrigin注解進行細粒度的配置。

1.局部配置

使用@CrossOrigin注解

先通過源碼看看該注解支持的屬性:

在Controller上使用@CrossOrigin注解

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/controller")
public class Controlle{
}

origins="*" 授權(quán)的源控制

maxAge=3600 授權(quán)的時間

在方法上使用@CrossOrigin注解

@CrossOrigin(maxAge = 3600)
@RestController
@RequestMapping("/account")
public class Controller {

    @CrossOrigin("http://www.baidu.com")
    @RequestMapping("/a")
    public void a() {
        // ...
    }

}

這里控制器和方法同時有,Spring會合并兩個注解的屬性一起應(yīng)用到a方法上,可以單獨管理

2.全局配置

基于java代碼配置

默認情況下所有的域名和GET、HEAD和POST方法都是允許的。

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

你也可以單獨更改任何屬性,以及配置適用于特定的路徑模式的CORS:

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("http://domain2.com")
            .allowedMethods("PUT", "DELETE")
            .allowedHeaders("header1", "header2", "header3")
            .exposedHeaders("header1", "header2")
            .allowCredentials(false).maxAge(3600);
    }
}

不限制任何請求(方便復制粘貼)

@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "TRACE");
    }
}

基于XML的配置

<mvc:cors>
    <mvc:mapping path="/**" />
</mvc:cors>

這個配置和上面Java方式的第一種作用一樣。

同樣,你可以做更復雜的配置:

<mvc:cors>

    <mvc:mapping path="/api/**"
        allowed-origins="http://domain1.com, http://domain2.com"
        allowed-methods="GET, PUT"
        allowed-headers="header1, header2, header3"
        exposed-headers="header1, header2" allow-credentials="false"
        max-age="123" />

    <mvc:mapping path="/resources/**"
        allowed-origins="http://domain1.com" />

</mvc:cors>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容