摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時(shí)候其實(shí)就已經(jīng)有過跨域的問題的了，當(dāng)時(shí)候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來。

今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947

我在收集AJAX面試題的時(shí)候其實(shí)就已經(jīng)有過AJAX跨域的問題的了，當(dāng)時(shí)候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了AJAX跨域的理解，以此記錄下來。

上面的圖也很清晰了，因?yàn)闉g覽器為了安全(同源)，本身就限制了。

當(dāng)我們發(fā)送XMLHttpRequest請求的時(shí)候，如果請求的是別的域(主機(jī)域名、端口)不同時(shí)，那么就會產(chǎn)生跨域問題(客戶端無法獲取服務(wù)端返回的數(shù)據(jù))

值得注意的是：跨域的問題是發(fā)生在XMLHttpRequest請求的，也就是說，不是XMLHttpRequest請求是不會有跨域問題的

舉個(gè)很簡單的例子：在編寫網(wǎng)頁的時(shí)候，，URL不是本域的還是可以正常獲取該圖片的

明顯地，跨域的問題是由于瀏覽器限制的，是XMLHttpRequest才會發(fā)生的，那么我們可以以這個(gè)思路去找找解決思路：

對于瀏覽器的問題，可以使用相關(guān)的參數(shù)進(jìn)行啟動瀏覽器，是可以解決跨域的問題，但是通用性是極低的，了解即可。

JSONP是JSON使用的一種補(bǔ)充方式，不是官方的協(xié)議。JSONP是一種解決跨域問題的一種協(xié)議

JSONP這種解決方案其實(shí)現(xiàn)在已經(jīng)很少用了(復(fù)雜一點(diǎn)，需要修改后臺代碼)，但我們可以適當(dāng)了解一下。

在后端增加一個(gè)控制器，繼承AbstractJsonpResponseBodyAdvice類，完整代碼如下：

@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {

    public JsonpAdvice() {
        // TODO Auto-generated constructor stub
        super("callback2");
    }
}

前端ajax請求：

// 服務(wù)器返回的結(jié)果
    var result;

    $.ajax({
        url: base +"/get1",
        dataType: "jsonp",
        jsonp: "callback2",

        //是否需要緩存，如果這里沒有配置緩存，那么請求的URL還會有一個(gè)參數(shù)
        cache:true,
        success: function(json){
            result = json;
        }
    });

注意的是，前端AJAX的jsonp: "callback2",要和我們的Controllersuper("callback2");是一致的，不然是不會有效的。

JSONP原理是動態(tài)創(chuàng)建script來進(jìn)行請求的:

JSONP的弊端：

要對服務(wù)器的代碼進(jìn)行改動

只支持GET方法(原理是動態(tài)創(chuàng)建script來進(jìn)行請求的)

發(fā)送的不是XMLHttpRequest請求(XMLHttpRequest請求有很多好用的特性)

參考資料：

https://www.cnblogs.com/blacksonny/p/5846411.html

CORS解決跨域問題(也就是我們服務(wù)端被調(diào)用方解決跨域的思路）

對于CORS是怎么理解的，我就直接摘抄一下：https://segmentfault.com/a/1190000012469713#articleHeader8的了。

在Java中，我們寫下面這個(gè)過濾器，就可以完全解決跨域的問題了：

package com.imooc;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.tomcat.util.buf.StringUtils;

public class CrosFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // TODO Auto-generated method stub

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        // TODO Auto-generated method stub

        HttpServletResponse res = (HttpServletResponse) response;
        
        HttpServletRequest req = (HttpServletRequest) request;
        
        
        //帶cookie的時(shí)候，origin必須是全匹配，不能使用*
        String origin = req.getHeader("Origin");
        if (!org.springframework.util.StringUtils.isEmpty(origin)) {
            res.addHeader("Access-Control-Allow-Origin", origin);
        }
        res.addHeader("Access-Control-Allow-Methods", "*");
        
        // 支持所有自定義頭和預(yù)檢命令(非簡單請求會有預(yù)檢命令)
        String headers = req.getHeader("Access-Control-Request-Headers");
        if (!org.springframework.util.StringUtils.isEmpty(headers)) {
            res.addHeader("Access-Control-Allow-Headers", headers);            
        }
        
        res.addHeader("Access-Control-Max-Age", "3600");
        // enable cookie
        res.addHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
        // TODO Auto-generated method stub

    }

}

上面提到了非簡單請求，那什么是非簡單請求呢，可以看下面的圖：

非簡單請求會發(fā)出一個(gè)預(yù)檢命令的(當(dāng)然了，我們上面的Filter已經(jīng)解決預(yù)檢命令的問題了):

如果使用的是Spring框架的話，那就只需要一個(gè)注解就能夠解決跨域的問題了：@CrossOrigin

我們在的商用開發(fā)中，一般請求的過程是這樣的：瀏覽器->HTTP服務(wù)器(Nginx,Apache)->應(yīng)用服務(wù)器(Tomcat,Weblogic)

上面編寫的Filter、Spring框架都是在應(yīng)用服務(wù)器上解決的，我們也是可以通過HTTP服務(wù)器(Nginx,Apache)來進(jìn)行解決跨域問題的！

Nginx我用過，Apache我倒是還沒用過，下面就簡單記錄了Nginx和Apache是如何配置的：

Nginx配置：

Apache配置：

在之前的圖我們已經(jīng)看到了，解決跨域的問題可以在“調(diào)用方”中來進(jìn)行解決。

“調(diào)用方”解決跨域的問題是這個(gè)思路的：讓發(fā)送出去的請求代理成是本域的

舉個(gè)例子：

www.zhongfucheng.top是調(diào)用方

www.zhongfucheng.site是被調(diào)用方

它倆是不同域的，但我們可以在nginx或Apache上進(jìn)行配置代理：將被調(diào)用方www.zhongfucheng.site映射成別的路徑

比如，像下面的圖，將8080端口的映射成了ajaxServer，當(dāng)調(diào)用方訪問ajaxServer路徑時(shí)，這樣的方法在外部看起來就不像是跨域了，像是訪問本地（8081端口），但實(shí)際訪問別的域（8080端口）

令我感到最簡單的是通過Spring的注解就可以解決跨域的問題了，JSONP的方式已經(jīng)是很少用的了，因?yàn)榇嬖谝欢ǖ谋锥耍私庖幌乱矡o妨，畢竟可能面試的時(shí)候會問到。當(dāng)沒有用任何框架的時(shí)候，寫Filter也不麻煩，也只是配置了一下HTTP頭信息而已。如果使用Nginx、Apache時(shí)，也可以用代理或者配置HTTP頭信息都可以解決。看完之后，有沒有覺得跨域問題就迎刃而解了。

如果文章有錯(cuò)的地方歡迎指正，大家互相交流。習(xí)慣在微信看技術(shù)文章的同學(xué)，想要獲取更多的Java資源的同學(xué)，可以關(guān)注微信公眾號:Java3y