本篇文章給大家帶來的內容是關於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 是服務器寫入瀏覽器的一小段信息,只有同源的網頁才能共享。
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
是服務器與客戶端跨源通信的常用方法。
最大特點就是簡單適用,老式瀏覽器全部支持,服務器改造非常小。
它的基本思想是,網頁通過添加一個
閱讀更多 科技i關注 的文章