跨域請求及解決方案

跨域請求

  跨域請求是指當前發起請求的域與該請求指向的資源所在的域不一樣，只有當協議+域名+端口三者均相同時才認爲是同域。例如，aaa.com 的網站發起一個URL爲bbb.com/pay/purchase 的 Ajax 請求，該請求即爲跨域請求；

存在問題

  跨域請求可能導致CSRF攻擊，因此出於安全方面的考慮，瀏覽器通常會對跨域請求進行限制；

解決方案

方案1: JSONP（廢棄）

  JSONP只支持GET請求，無法支持現在流行的RESTful風格；

方案2：代理（常用）

  使用Nginx或者Node.js等作爲中間層進行請求的轉發；

方案3：CORS（常用）

  CORS 全稱爲 Cross Origin Resource Sharing（跨域資源共享），W3C的一個標準，支持標準的瀏覽器可以向聲明CORS的跨域服務器發送請求，大致分爲兩步：

1. 當瀏覽器發現爲跨域請求時，首先以 OPTIONS 請求方式發送一個預請求（瀏覽器自動添加CROS頭部），從而獲知服務器端對跨源請求所支持 HTTP 方法；
2. 在確認服務器允許該跨源請求的情況下，以實際的 HTTP 請求方法發送那個真正的請求，共享資源的服務器接收到請求後，進行校驗及處理，然後響應頭中添加CORS相關頭部返回；

CORS頭部字段

  這些頭部實際就是共享資源服務器聲明的白名單，允許特定域名的特定動作的請求訪問資源，詳見博文

瀏覽器支持情況

服務端配置@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);
    }
}

參考：

1. http://blog.720ui.com/2016/web_cross_domain/
2. 解釋：https://www.jianshu.com/p/f880878c1398
3. 服務端聲明方式：https://www.jianshu.com/p/9203e9b14465