什么是跨域

簡單的說即為瀏覽器限制訪問A站點下的js代碼對B站點下的url進行ajax請求玉凯。比如說，前端域名是www.abc.com，那么在當前環(huán)境中運行的js代碼碉就，出于安全考慮回梧，訪問www.xyz.com域名下的資源废岂，是受到限制的。現(xiàn)代瀏覽器默認都會基于安全原因而阻止跨域的ajax請求狱意，這是現(xiàn)代瀏覽器中必備的功能泪喊，但是往往給開發(fā)帶來不便。特別是對我這樣后臺開發(fā)人員來講髓涯，這個事情簡直神奇袒啼。
但跨域的需求卻一直都在，為了跨域纬纪，勤勞勇敢的程序猿們想出了許許多多的方法蚓再，例如，jsonP包各、代理文件等等摘仅。但這些做法增加了許多不必要的維護成本，而且應(yīng)用場景也有許多限制问畅，例如jsonP并非XHR娃属，所以jsonP只能使用GET傳遞參數(shù)。更詳細的資料可以看這里 Web應(yīng)用跨域訪問解決方案匯總护姆。

CORS協(xié)議

如今的JS大有一統(tǒng)天下的趨勢矾端，瀏覽器已經(jīng)成了大多應(yīng)用最好的安身之所。哪怕在移動端也有各種Hybird方案卵皂，在本地文件系統(tǒng)的Web頁面秩铆，也有需要獲取外部數(shù)據(jù)的需求，而這些需求也必然是跨域的。在尋找跨域解決方案時殴玛，發(fā)現(xiàn)了最優(yōu)雅解決方案就是HTML5來帶了的“Cross-Origin Resource Sharing”的新特性捅膘，來賦予開發(fā)者權(quán)力決定資源是否允許被跨域訪問。CORS是一個W3C標準滚粟，全稱是”跨域資源共享”（Cross-origin resource sharing）寻仗。它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求凡壤，從而克服了AJAX只能同源使用的限制愧沟。

為什么說它優(yōu)雅呢？
整個CORS通信過程鲤遥，都是瀏覽器自動完成沐寺，不需要用戶參與。對于開發(fā)者來說盖奈，CORS通信與同源的AJAX通信沒有差別混坞，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源钢坦，就會自動添加一些附加的頭信息究孕，有時還會多出一次附加的請求，但用戶不會有感覺爹凹。因此厨诸，實現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實現(xiàn)了CORS接口禾酱，就可以跨源通信微酬。看看文檔也不是什么難事嘛颤陶，就是需要在http頭中設(shè)置Access-Control-Allow-Origin來決定需要允許哪些站點來訪問颗管。關(guān)于CROS協(xié)議更詳細內(nèi)容參考 跨域資源共享 CORS 詳解。

CORS常見header

CORS具有以下常見的header的例子:
Access-Control-Allow-Origin: http://kbiao.me
Access-Control-Max-Age: 3628800
Access-Control-Allow-Methods: GET滓走，PUT, DELETE
Access-Control-Allow-Headers: content-type

• “Access-Control-Allow-Origin”表明它允許”http://kbiao.me “發(fā)起跨域請求

• “Access-Control-Max-Age”表明在3628800秒內(nèi)垦江，不需要再發(fā)送 預(yù)檢驗 請求，可以緩存該結(jié)果（上面的資料上我們知道CROS協(xié)議中搅方，一個AJAX請求被分成了第一步的 OPTION預(yù)檢測請求和正式請求）比吭。
• “Access-Control-Allow-Methods”表明它允許GET、PUT姨涡、DELETE的外域請求衩藤。
• “Access-Control-Allow-Headers”表明它允許跨域請求包含content-type頭
  當然在處理這個問題的時候前端也有不少坑，特別是Chrome瀏覽器不允許localhost的跨域請求绣溜，詳細方案見我項目中負責(zé)前端解決方案的小伙伴慷彤。 假裝有鏈接。

常規(guī)解決方案

知道了問題的原因怖喻，也知道了配套的解決辦法底哗，現(xiàn)在就讓我們來實現(xiàn)解決。思路很簡單锚沸，當前端要請求跨域資源時候跋选，我們給它加上響應(yīng)的響應(yīng)頭即可。很顯然我們自己定義一個過濾器是最簡單不過了哗蜈。

@Component
public class myCORSFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        String origin = (String) servletRequest.getRemoteHost()+":"+servletRequest.getRemotePort();
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
        response.setHeader("Access-Control-Allow-Credentials","true");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

@Component 是Spring的注解前标，關(guān)鍵部分在doFilter中，添加了我們需要的頭距潘， option是預(yù)檢測需要所以需要允許炼列， Authorization是做了oauth2登錄響應(yīng)所必須的， Access-Control-Allow-Credentials表示允許cookies音比。都是根據(jù)自己項目的實際需要配置俭尖。
再配置Web.xml使得過濾器生效

<filter>
  <filter-name>cors</filter-name>
  <filter-class>·CLASS_PATH·.myeCORSFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>cors</filter-name>
  <url-pattern>/api/*</url-pattern>
</filter-mapping>

接下來前端就可以像往常一樣使用AJAX請求獲得資源了，完全不需要做出什么改變洞翩。

使用Spring的解決方案

Sping 4中更優(yōu)雅的辦法稽犁，Spring從4.2開始提供了非常方便的實現(xiàn)跨域的方法，對CORS提供了完整支持骚亿。詳細信息可以參考Spring官網(wǎng)開發(fā)者博客：cors-support-in-spring-framework

在Controller中配置

下面舉例在方法和Controller上使用該注解：

@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {

    @RequestMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

這里指定當前的AccountController中所有的方法可以處理domain2.com域上的請求已亥。同樣我們還可以在Controller中的每個方法上配置，像下面這樣：

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

    @CrossOrigin("http://domain2.com")
    @RequestMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

在這個例子中来屠，AccountController類上也有@CrossOrigin注解虑椎，retrieve方法上也有注解，Spring會合并兩個注解的屬性一起使用俱笛。

全局配置

全局配置默認會用于所有Controller中绣檬，定義類繼承WebMvcConfigurerAdapter，設(shè)置跨域相關(guān)的配置：

public class CorsConfigurerAdapter extends WebMvcConfigurerAdapter{
  
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
        registry.addMapping("/api/*").allowedOrigins("*")
             .allowedMethods("GET", "PUT", "DELETE", "POST");
    }
}

將該類注入到容器中：

<bean class="com.tmall.wireless.angel.web.config.CorsConfigurerAdapter"></bean>

Spring Boot中的用法

在Spring Boot中集成了Spring所有原生功能外嫂粟，還提供了一個非常簡單的外部配置方式即通過Spring Boot的全局配置文件application.properties來配置全局CORS生效：

endpoints.cors.allowed-origins=http://www.xxx.com
endpoints.cors.allowed-methods=GET,POST,PUT,DELETE

也可以在入口函數(shù)上添加@CrossOrigin注解來實現(xiàn)跨域：

@SpringBootApplication
@CrossOrigin(origins = { "http://www.xxx.com" }, methods = { RequestMethod.GET, RequestMethod.PUT, RequestMethod.POST,
        RequestMethod.DELETE })
public class ConsumerApplication {

    public static void main(String[] args) {
        SpringApplication.run(ConsumerApplication.class, args);
    }
}

更詳細的內(nèi)容參考Spring 官方的hello world案例 :
Enabling Cross Origin Requests for a RESTful Web Service