從URL到跨域

一抒痒、什么是URL

URL全稱為統(tǒng)一資源定位符幌绍。基本的URL會包含協(xié)議故响、服務(wù)器名稱傀广、資源文件路徑名稱。一個完整的URL中可以包含協(xié)議彩届、域名伪冰、端口號、資源文件路徑名稱樟蠕、參數(shù)與hash值六個部分贮聂。

語法：協(xié)議://用戶名:密碼@子域名.域名.頂級域名:端口號/目錄/文件名.文件名后綴?參數(shù)名=參數(shù)值&參數(shù)名=參數(shù)值#HASH值

1. 協(xié)議：用來完成客戶端和服務(wù)器之間的數(shù)據(jù)傳輸,傳輸協(xié)議可以分為三類

http：超文本傳輸協(xié)議≌纾客戶端和服務(wù)器傳輸?shù)膬?nèi)容除文本以為,還可以傳輸圖片吓懈、音頻和視頻等文件流（如：二進制編碼 || base64編碼）,還包括一些XML格式的數(shù)據(jù)等。

https：http ssl協(xié)議靡狞。https協(xié)議比http協(xié)議更加安全耻警，因為數(shù)據(jù)內(nèi)容的傳輸通道是經(jīng)過ssl加密的(需要在服務(wù)器端進行特殊的處理)，涉及金融類網(wǎng)站一般都是用https協(xié)議
ftp：資源文件傳輸協(xié)議。用于客戶端把資源文件上傳到服務(wù)器端榕栏，或者從服務(wù)器端下載一些資源文件。ftp協(xié)議一般情況可傳輸?shù)膬?nèi)容會比http這類協(xié)議傳輸?shù)膬?nèi)容多扒磁。

2.域名：用于解析對應(yīng)的IP地址庆揪，便于記憶。域名分為三級

一級域名：baidu.com
二級域名：www.baidu.com || sports.baidu.com || ai.baidu.com
三級域名：my.sports.baidu.com

3.端口號：在服務(wù)器發(fā)布項目的時候缸榛，可以通過端口號區(qū)分當前服務(wù)器上不同的項目。

一臺服務(wù)器的端口號取值范圍在0~65535之間，如果電腦上安裝了很多程序均澳，有一些端口號是被占用的找前。

http：默認端口號80
https：默認端口號443
ftp：默認端口號21

4.資源文件路徑名稱

在服務(wù)器中發(fā)布項目的時候判族，一般會配置一些默認文檔躺盛，即使用戶不輸入文件的名稱槽惫，服務(wù)器也會默認找到配置好的文檔。

為了做SEO優(yōu)化辩撑。通常會把一些動態(tài)頁面的地址進行URL重寫（需要服務(wù)器處理）

5.路徑參數(shù)

把一些值通過key=value的方式放在URL末尾界斜。通過？號傳遞

在ajax的get請求中槐臀。我們可以通過問好傳遞參數(shù)的方式锄蹂，在客戶端把一些信息傳遞給服務(wù)器。服務(wù)器通過接受不同的傳遞信息水慨，返回不同的數(shù)據(jù)
如果想要清除ajax get 方法的緩存得糜。可以通過：晰洒？math_random=0.123456;實現(xiàn)

6.HASH值

HASH值可以作為在頁面中的錨點定位

在單頁面應(yīng)用開發(fā)中作為前端路由使用如：Vue Router 朝抖、 React Router

二、同源策略

同源策略（Same-Origin Policy）是瀏覽器的一個安全限制谍珊，從一個源加載的文檔或腳本默認不能訪問另一個源的資源治宣。最早由Netscape公司提出。所謂同源就是要求域名、協(xié)議侮邀、端口號相同坏怪。非同源的腳本不能訪問或者操作其他域的頁面對象(如DOM等)。

作為著名的安全策略绊茧。雖然同源策略只是一個規(guī)范铝宵，并不強制要求。但現(xiàn)在所有支持JavaScript的瀏覽器都會使用這個策略华畏，以至于該策略稱為瀏覽器最核心的安全功能鹏秋。如果缺少同源策略。web的安全將無從談起亡笑。

1.同源策略的要求

同源策略要求域名侣夷、協(xié)議、端口號保持一致仑乌。

同域：host相同百拓。頂級域名，一級域名晰甚，二級域名耐版，三級域名等必須相同。且域名不能與ip對應(yīng)
同協(xié)議：http與https協(xié)議保持一致
同端口：端口號必須相同

如果是協(xié)議和端口造成的跨域問題無法在前臺解決

在跨域問題上压汪，域僅僅是通過 URL首部識別，而不會去嘗試判斷相同的IP地址對應(yīng)著兩個域或兩個域是否在一個IP上

例如：
1.http://www.a.com/a.js                同協(xié)議古瓤，同域止剖，資源文件路徑不同
  http://www.a.com/b.js                允許通信
  
2.http://www.a.com/lab/a.js            同協(xié)議，同域落君，不同資源路徑文件夾
  http://www.a.com/script/b.js         運行通信
  
3.http://www.a.com:8000/a.js           同協(xié)議穿香，同域，不同端口
  http://www.a.com/b.js                不允許通信
  
4.http://www.a.com/a.js                不同協(xié)議绎速，同域
  https://www.a.com/b.js               不允許通信

5.http://www.a.com/a.js                同協(xié)議皮获，不同域名和域名對應(yīng)ip
  http://70.32.92.74/b.js              不允許通信

6.http://www.a.com/a.js                同協(xié)議，主域相同纹冤，子域不同
  http://script.a.com/b.js             不允許通信（cookie這種情況下也不允許訪問）

7.http://www.a.com/a.js                同協(xié)議洒宝。同一級域名，不同二級域名
  http://a.com/b.js                    不允許通信（cookie這種情況下也不允許訪問）

8.http://www.cnblogs.com/a.js          同協(xié)議萌京，不同域名
  http://www.a.com/b.js                不允許通信

2.同源策略的限制

同源策略下的web世界雁歌。域的壁壘高筑。從而保證各個網(wǎng)頁相互獨立知残】肯梗互相之間不能直接訪問。

iframe限制：可以訪問同城資源，可讀寫乏盐。訪問跨域頁面時佳窑，只讀。
Ajax限制：同域資源可讀寫父能∩翊眨跨域請求會直接被瀏覽器攔截(谷歌瀏覽器chrome下跨域請求不會發(fā)起，其他瀏覽器一般都是可發(fā)送跨域請求法竞，但響應(yīng)會被瀏覽器攔截)
Scrpit限制：script并無跨域限制耙厚。因為script標簽引入的文件不能被客戶端的js獲取到。不會影響到原頁面的安全岔霸。因此script標簽引入的文件不需要遵守瀏覽器的同源策略薛躬。

3.如何解決跨域

Webpack代理

在vue腳手架中會自動生成一份webpack配置文件，便于打包時使用呆细⌒捅Γ可以通過webpack的代理實現(xiàn)

 //在vue的全局文件 vue.config.js中 找的webpack 的 devServer 配置 并進行如下配置
 devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 代理
    proxy: {
      // 攔截key規(guī)則,把請求拼接target的目標 并發(fā)送
      // 代理幫我們模擬的請求,使得服務(wù)器無法感知當前請求是跨域請求 于是不再檢測
      '^/': {
        target: “http://www.???.com”,   //需要代理的協(xié)議，域名絮爷，端口號
        changeOrigin: true,            // 如果是跨域請求應(yīng)該寫上
        pathRewrite: {                // 可以將api中的某個路徑文件 替換成需要的字符
          // '/admin': '/api'        // /admin/user/list ==> /api/user/list
        }
      }
    }
    // before: require('./mock/mock-server.js') //不需要
  },

后臺配置cors

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 參照文檔將后臺配置跨域資源共享趴酣。可以實現(xiàn)前端無感知請求數(shù)據(jù)

注意：只有進行請求坑夯，服務(wù)器的預(yù)檢測就會自動發(fā)送一個 options 請求來檢測服務(wù)器是否可用岖寞。如果請求跨域則會返回不可用。當后臺配置了cors后則可以正常發(fā)送請求

nginx

使用nginx代理服務(wù)器配置解決跨域