|
要想弄明白什么是跨域就要知道什么是同源策略，要想知道什么是同源策略就要先知道什么是源。 源：如果兩個(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)不能訪問另一個(gè)源的資源。例如a.com/111/html頁(yè)面不能訪問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解決跨域問題和通過代理解決跨域問題。 CORS解決跨域問題CORS是Cross-Origin Resources Sharing的簡(jiǎn)寫，中文翻譯為“跨域資源共享”，是W3C的標(biāo)準(zhǔn)。通過CORS，瀏覽器允許向其他源服務(wù)器發(fā)送資源請(qǐng)求。
設(shè)置CORS需要瀏覽器和服務(wù)器兩個(gè)方面支持。目前基本上主流的瀏覽器都支持CORS（IE 8 和 9 需要通過 XDomainRequest 來實(shí)現(xiàn)），所以只要后端服務(wù)支持CORS，就能夠?qū)崿F(xiàn)跨域。服務(wù)端設(shè)置 Access-Control-Allow-Origin 就可以開啟 CORS。 該屬性表示哪些域名可以訪問資源，如果設(shè)置通配符(*)則表示所有網(wǎng)站都可以訪問資源。要實(shí)現(xiàn)CORS跨域其實(shí)非常簡(jiǎn)單，說白了就是在服務(wù)端設(shè)置一系列的HTTP頭，主要分為請(qǐng)求頭和響應(yīng)頭，在請(qǐng)求和響應(yīng)時(shí)加上這些HTTP頭即可輕松實(shí)現(xiàn)CORS。
雖然設(shè)置 CORS 和前端沒什么關(guān)系，但是通過這種方式解決跨域問題的話，會(huì)在發(fā)送請(qǐng)求時(shí)出現(xiàn)兩種情況，分別為簡(jiǎn)單請(qǐng)求和復(fù)雜請(qǐng)求。針對(duì)不同的情況，服務(wù)端的設(shè)置也不一樣。 簡(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 復(fù)雜請(qǐng)求
不符合以上條件的請(qǐng)求就肯定是復(fù)雜請(qǐng)求了。
復(fù)雜請(qǐng)求的 CORS 請(qǐng)求，會(huì)在正式通信之前，增加一次 HTTP 查詢請(qǐng)求，稱為"預(yù)檢"請(qǐng)求,該請(qǐng)求是 option 方法的，通過該請(qǐng)求來向服務(wù)端詢問從當(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: ”POST“
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“
#允許訪問的頭信息
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)求頭：
響應(yīng)頭： 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);
}
}
通過代理解決跨域問題實(shí)現(xiàn)原理：同源策略是瀏覽器需要遵循的標(biāo)準(zhǔn)，而如果是請(qǐng)求都發(fā)給代理服務(wù)器代理服務(wù)器再向后端服務(wù)器請(qǐng)求就可以規(guī)避跨域的問題。
例如用nginx做代理服務(wù)器。
nginx配置 server{
# 監(jiān)聽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;
}
}
|
