跨域

酒駕的酒瓶蓋 2020-03-12

展開全文

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

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

下表給出了相對http://store./dir/page.html同源檢測的示例:
URL 結果原因
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 )

同源策略

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

怎么解決跨域

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

CORS解決跨域問題

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

簡單請求
只要同時滿足以下兩大條件，就屬于簡單請求
條件 1：使用下列方法之一：
GET
HEAD
POST
條件 2：Content-Type 的值僅限于下列三者之一：
text/plain
multipart/form-data
application/x-www-form-urlencoded
復雜請求
不符合以上條件的請求就肯定是復雜請求了。
復雜請求的 CORS 請求，會在正式通信之前，增加一次 HTTP 查詢請求，稱為"預檢"請求,該請求是 option 方法的，通過該請求來向服務端詢問從當前源發(fā)送請求以及允許的請求方法和請求字段。
HTTP請求頭：

#請求域
Origin: ”http://localhost:8080“

#這兩個屬性只出現(xiàn)在預檢請求中，即OPTIONS請求
Access-Control-Request-Method: ”POST“
Access-Control-Request-Headers: ”content-type“

HTTP響應頭：

#允許向該服務器提交請求的URI，*表示全部允許，在SpringMVC中，如果設成*，會自動轉成當前請求頭中的Origin
Access-Control-Allow-Origin: ”http://localhost:8080“

#允許訪問的頭信息
Access-Control-Expose-Headers: "Set-Cookie"

#預檢請求的緩存時間（秒），即在這個時間段里，對于相同的跨域請求不會再預檢了
Access-Control-Max-Age: ”1800”

#允許Cookie跨域，在做登錄校驗的時候有用
Access-Control-Allow-Credentials: “true”

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

例如簡單請求
請求頭：

image.png

響應頭：

image.png

springboot里面可以這樣設置

@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);
    }
}

通過代理解決跨域問題

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

image.png

例如用nginx做代理服務器。
nginx配置

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