要想弄明白什么是跨域就要知道什么是同源策略，要想知道什么是同源策略就要先知道什么是源。

源：如果兩個(gè)頁(yè)面（接口）的協(xié)議，端口或者域名都相同，那么兩個(gè)頁(yè)面就有相同的源。

下表給出了相對(duì)http://store./dir/page.html同源檢測(cè)的示例:
URL 結(jié)果 原因
http://store./dir2/other.html 成功
http://store./dir/inner/another.html 成功
https://store./secure.html 失敗 不同協(xié)議 ( https和http )
http://store.:81/dir/etc.html 失敗 不同端口 ( 81和80)
http://news./dir/other.html 失敗 不同域名 ( news和store )

同源策略

同源策略是瀏覽器的一個(gè)安全限制，從一個(gè)源加載的文檔或者腳本默認(rèn)不能訪問(wèn)另一個(gè)源的資源。例如a.com/111/html頁(yè)面不能訪問(wèn)b.com/person這種接口，因?yàn)樗麄兪遣挥玫脑础?br>注意：下面幾個(gè)不受同源策略限制
1、頁(yè)面中鏈接（例如頁(yè)面的<a href="http://www.w3school.com.cn">W3School</a>）、重定向和表單提交不受同源策略限制
2、跨域資源的引入是不受同源策略的限制，但是js讀不到其中的內(nèi)容。<script src="..."></script>，<img>，<link>，<iframe>等。

怎么解決跨域

介紹生產(chǎn)中最常用的兩種解決跨域的方法。CORS解決跨域問(wèn)題和通過(guò)代理解決跨域問(wèn)題。

CORS解決跨域問(wèn)題

CORS是Cross-Origin Resources Sharing的簡(jiǎn)寫(xiě)，中文翻譯為“跨域資源共享”，是W3C的標(biāo)準(zhǔn)。通過(guò)CORS，瀏覽器允許向其他源服務(wù)器發(fā)送資源請(qǐng)求。
設(shè)置CORS需要瀏覽器和服務(wù)器兩個(gè)方面支持。目前基本上主流的瀏覽器都支持CORS（IE 8 和 9 需要通過(guò) XDomainRequest 來(lái)實(shí)現(xiàn)），所以只要后端服務(wù)支持CORS，就能夠?qū)崿F(xiàn)跨域。服務(wù)端設(shè)置 Access-Control-Allow-Origin 就可以開(kāi)啟 CORS。 該屬性表示哪些域名可以訪問(wèn)資源，如果設(shè)置通配符(*)則表示所有網(wǎng)站都可以訪問(wèn)資源。要實(shí)現(xiàn)CORS跨域其實(shí)非常簡(jiǎn)單，說(shuō)白了就是在服務(wù)端設(shè)置一系列的HTTP頭，主要分為請(qǐng)求頭和響應(yīng)頭，在請(qǐng)求和響應(yīng)時(shí)加上這些HTTP頭即可輕松實(shí)現(xiàn)CORS。
雖然設(shè)置 CORS 和前端沒(méi)什么關(guān)系，但是通過(guò)這種方式解決跨域問(wèn)題的話，會(huì)在發(fā)送請(qǐng)求時(shí)出現(xiàn)兩種情況，分別為簡(jiǎn)單請(qǐng)求和復(fù)雜請(qǐng)求。針對(duì)不同的情況，服務(wù)端的設(shè)置也不一樣。

1. 簡(jiǎn)單請(qǐng)求
   只要同時(shí)滿足以下兩大條件，就屬于簡(jiǎn)單請(qǐng)求
   條件 1：使用下列方法之一：
   GET
   HEAD
   POST
   條件 2：Content-Type 的值僅限于下列三者之一：
   text/plain
   multipart/form-data
   application/x-www-form-urlencoded

2. 復(fù)雜請(qǐng)求
   不符合以上條件的請(qǐng)求就肯定是復(fù)雜請(qǐng)求了。
   復(fù)雜請(qǐng)求的 CORS 請(qǐng)求，會(huì)在正式通信之前，增加一次 HTTP 查詢請(qǐng)求，稱為"預(yù)檢"請(qǐng)求,該請(qǐng)求是 option 方法的，通過(guò)該請(qǐng)求來(lái)向服務(wù)端詢問(wèn)從當(dāng)前源發(fā)送請(qǐng)求以及允許的請(qǐng)求方法和請(qǐng)求字段。
   HTTP請(qǐng)求頭：

#請(qǐng)求域
Origin: ”http://localhost:8080“

#這兩個(gè)屬性只出現(xiàn)在預(yù)檢請(qǐng)求中，即OPTIONS請(qǐng)求
Access-Control-Request-Method: ”P(pán)OST“
Access-Control-Request-Headers: ”content-type“

HTTP響應(yīng)頭：

#允許向該服務(wù)器提交請(qǐng)求的URI，*表示全部允許，在SpringMVC中，如果設(shè)成*，會(huì)自動(dòng)轉(zhuǎn)成當(dāng)前請(qǐng)求頭中的Origin
Access-Control-Allow-Origin: ”http://localhost:8080“

#允許訪問(wèn)的頭信息
Access-Control-Expose-Headers: "Set-Cookie"

#預(yù)檢請(qǐng)求的緩存時(shí)間（秒），即在這個(gè)時(shí)間段里，對(duì)于相同的跨域請(qǐng)求不會(huì)再預(yù)檢了
Access-Control-Max-Age: ”1800”

#允許Cookie跨域，在做登錄校驗(yàn)的時(shí)候有用
Access-Control-Allow-Credentials: “true”

#允許提交請(qǐng)求的方法，*表示全部允許
Access-Control-Allow-Methods:GET,POST,PUT,DELETE,PATCH

例如簡(jiǎn)單請(qǐng)求
請(qǐng)求頭：

image.png

響應(yīng)頭：

image.png

springboot里面可以這樣設(shè)置

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowCredentials(true)
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .maxAge(3600);
    }
}

通過(guò)代理解決跨域問(wèn)題

實(shí)現(xiàn)原理：同源策略是瀏覽器需要遵循的標(biāo)準(zhǔn)，而如果是請(qǐng)求都發(fā)給代理服務(wù)器代理服務(wù)器再向后端服務(wù)器請(qǐng)求就可以規(guī)避跨域的問(wèn)題。

image.png

例如用nginx做代理服務(wù)器。
nginx配置

server{
    # 監(jiān)聽(tīng)80端口
    listen 80;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:8080/api這個(gè)樣子的，都轉(zhuǎn)發(fā)到真正的服務(wù)端地址http://localhost:8080
    location ^~ /api {
        proxy_pass http://localhost:8080;
    }    
}