這篇文章帶給大家的內容是關於url完整結構以及同源跨域處理的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
前言：隨著工作時間的增長，前面學過的東西開始慢慢遺忘，抽空的時候就將一些資料整理整理，順一順，也當作一種溫習。
我只是前端工匠，防止自己成為【一斷網就無法工作的程式設計師】
#url的完整結構
協定類型（protocol）
透過URL可以指定的主要有以下幾種：http、ftp、gopher、telnet、file等
URL的組成協議1、protocol（協議）：指定使用的傳輸協議，下表列出protocol 屬性的有效方案名稱。
最常用的是HTTP協議，它也是目前WWW中應用最廣的協定。
http —— 超文本傳輸協定存取該資源。格式 http://
https —— 以安全通訊端層傳送的超文本傳輸協定存取此資源。格式 https://
ftp —— 透過 FTP存取資源。格式 FTP://
mailto —— 電子郵件地址 透過 SMTP 存取。格式 mailto:
ldap —— 輕型目錄存取協定搜尋
file —— 資源是本機上的檔案。格式file://
news － Usenet新聞群組
gopher － Gopher協定
telnet － Telnet協定
主機名稱（hostname）
是指存放資源的伺服器的網域名稱系統(DNS) 主機名稱或IP 位址。
有時，在主機名稱前也可以包含連接到伺服器所需的使用者名稱和密碼（格式：username:password）。
連接埠號（port） 整數，可選，省略時使用方案的預設端口，各種傳輸協定都有預設的連接埠號，
如http的預設連接埠為80,https的預設連接埠為443
路徑及檔名（path） 由零或多個「/」符號隔開的字串，一般用來表示主機上的一個目錄或檔案位址
參數（parameters） 傳遞參數，可有多個參數，用「&」符號隔開，每個參數的名稱和值用「=」符號隔開
hash值 #是用來指導瀏覽器動作的，對伺服器端完全無用。所以，HTTP請求中不包括#。
這些字元都不會被傳送到伺服器端。
改變#不觸發網頁重載
改變#會改變瀏覽器的訪問歷史
預設情況下，Google的網路蜘蛛忽略URL的#部分。
但是，Google也規定，如果你希望Ajax產生的內容被瀏覽引擎讀取，
那麼URL中可以使用"#!"，Google會自動將其後面的內容轉成查詢字串_escaped_fragment _的值
同源策略
協定相同網域相同埠相同
如果非同源，共有三種行為收到限制
（1） Cookie、LocalStorage 和 IndexDB 无法读取。 （2） DOM 无法获得。 （3） AJAX 请求不能发送。
Cookie 是伺服器寫入瀏覽器的一小段訊息，只有同源的網頁才能共享。
cookie的組成部分
Set－Cookie: NAME=VALUE；Expires=DATE；Path=PATH；Domain=DOMAIN_NAME；SECURE NAME=VALUE NAME是该Cookie的名称，VALUE是该Cookie的值。 在字符串“NAME=VALUE”中，不含分号、逗号和空格等字符。 Expires=DATE：Expires变量是一个只写变量，它确定了Cookie有效终止日期。 该属性值DATE必须以特定的格式来书写：星期几，DD－MM－YY HH:MM:SS GMT， GMT表示这是格林尼治时间。 反之，不以这样的格式来书写，系统将无法识别。 该变量可省，如果缺省时，则Cookie的属性值不会保存在用户的硬盘中， 而仅仅保存在内存当中，Cookie文件将随着浏览器的关闭而自动消失。 Domain=DOMAIN－NAME:Domain该变量是一个只写变量， 它确定了哪些Internet域中的Web服务器可读取浏览器所存取的Cookie， 即只有来自这个域的页面才可以使用Cookie中的信息。 这项设置是可选的，如果缺省时，设置Cookie的属性值为该Web服务器的域名。 Path=PATH：Path属性定义了Web服务器上哪些路径下的页面可获取服务器设置的Cookie。 一般如果用户输入的URL中的路径部分从第一个字符开始包含Path属性所定义的字符串， 浏览器就认为通过检查。如果Path属性的值为“/”， 则Web服务器上所有的WWW资源均可读取该Cookie。 Secure：在Cookie中标记该变量， 表明只有当浏览器和Web Server之间的通信协议为加密认证协议时， 浏览器才向服务器提交相应的Cookie。当前这种协议只有一种，即为HTTPS。
cookie 在Request Headers 中的傳輸格式
Cookie: KEY=VALUE; KEY=VALUE; KEY=VALUE 是没有 域 和 过期时间 的
兩個網頁一級網域相同，只是二級域名不同，瀏覽器允許透過設定document.domain共享Cookie。
document.domain = 'example.com';
如果兩個網頁不同來源，就無法拿到對方的DOM。
典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。
AJAX
除了架設伺服器代理程式（瀏覽器請求同源伺服器，再由後者請求外部服務），
vue專案中開發環境的跨網域處理
proxyTable
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: './',
proxyTable: {
'/api': {
target: 'http://temp.com',// 请换成你需要跨域请求的地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}proxyTable中的pathRewrite的/api理解成用'/api'代替target裡面的位址，
後面元件中我們掉介面時直接用api代替
有三種方法來規避這個限制
JSONP WebSocket CORS
JSONP
是服务器与客户端跨源通信的常用方法。
最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
它的基本思想是，网页通过添加一个