CORS

每個 HTTP 回應都有一組標頭。這篇文章旨在列出所有這些標頭，並對它們進行描述。 每個 HTTP 回應都可以有一組標頭。 這篇文章旨在列出所有這些標頭，並對它們進行描述。 標準標頭 Accept-Patch Accept-Ranges Age Allow Alt-Svc Cache-Control Connection Content-Disposition Content-Encoding Content-Language Content-Length Content-Location Content-Range Content-Type Date Delta-Base ETag Expires IM Last-Modified Link Location Pragma Proxy-Authenticate Public-Key-Pins Retry-After Server Set-Cookie Strict-Transport-Security Trailer Transfer-Encoding Tk Upgrade Vary Via Warning WWW-Authenticate CORS 標頭 非標準標頭 Content-Security-Policy Refresh X-Powered-By X-Request-ID X-UA-Compatible X-XSS-Protection 標準標頭 Accept-Patch Accept-Patch: text/example;charset=utf-8 指定此服務器支援的修補文件格式。 Accept-Ranges Accept-Ranges: bytes 指示這個伺服器通過字節給服務支援哪些部分內容範圍類型。 Age Age: 12 對象在代理快取中的存放時間，以秒為單位。 Allow Allow: GET, HEAD...

ES 模組是 ECMAScript 的模組化標準。儘管 Node.js 已經使用 CommonJS 標準多年，但瀏覽器從未擁有模組系統，因為關鍵的決策，如模組系統，必須首先由 ECMAScript 標準化，然後由瀏覽器實現。 這個標準化過程於 ES6 完成，瀏覽器開始實現這個標準，盡力保持一切保持協調，以相同的方式工作，現在 ES 模組在 Chrome、Safari、Edge 和 Firefox（版本 60 以後）中得到支援。 模組非常強大，因為它可以將各種功能封裝起來，並將這些功能作為庫暴露給其他 JavaScript 檔案。 ES 模組語法 導入模組的語法如下： import package from 'module-name' 而 CommonJS 使用： const package = require('module-name') 模組是一個使用 export 關鍵字將一個或多個值（物件、函式或變數）導出的 JavaScript 檔案。例如，這個模組導出了一個將字串轉換為大寫的函式： export default str => str.toUpperCase() 在這個例子中，模組定義了一個預設導出，所以可以是一個匿名函式。否則它需要一個名稱來區別於其他導出。 現在，任何其他的 JavaScript 模組可以透過導入它來使用 uppercase.js 提供的功能。 可以通過使用具有特殊屬性 type="module" 的 <script> 標籤將模組添加到 HTML 頁面中： <script type="module" src="index.js"></script> 注意：這種模組導入的行為類似於 defer 的腳本加載。請參見 使用 defer 和 async 高效加載 JavaScript...

如何透過設定 CORS 允許跨網站請求 通常在瀏覽器中運行的 JavaScript 應用程式只能存取由同一個網域（原始網站）提供的 HTTP 資源。 從相同來源載入圖片、腳本/樣式表一直是可行的。使用 @font-face 載入網頁字型時也已經有預設的「同源政策」。而其他較不常見的事物（例如 WebGL 紋理和 Canvas API 中載入的 drawImage 資源）也是如此。 然而，對於從外部第三方伺服器發送的 XHR 和 Fetch 請求，預設會失敗。這就是除非第三方伺服器實現了一個允許建立連線以及請求資源並下載和使用的機制。 這個機制被稱為 CORS 跨來源資源共用。 需要 CORS 的一件非常重要的事情是 ES 模組，最近在現代瀏覽器中引入了。 如果您沒有在伺服器端設置允許提供第三方來源的 CORS 政策，請求將會失敗。 Fetch 範例: XHR 範例: 跨來源資源失敗的條件如下: 不同網域 不同子網域 不同埠號 不同協定 CORS 的目的是為了保護您的安全，防止惡意使用者利用您正在使用的 Web 平台。 如果您同時控制了伺服器和客戶端，您會知道雙方都是可信任的，因此有充分的理由允許資源共用。 如何做到這點呢？ 答案取決於您使用的伺服器端堆棧。 瀏覽器支援 相當不錯（基本上所有，除了 IE<10）: Express 範例 如果您正在使用 Node.js 和 Express 作為框架，請使用 CORS 中介軟體套件。 這裡有一個簡單的 Express Node.js 伺服器範例: const express = require('express') const app = express() app....

介紹跨域資源共享，一種讓客戶端和服務器通信的方式，即使它們不在同一個域 在瀏覽器中運行的JavaScript應用程序通常只能訪問提供它的相同域名（源）上的HTTP資源。 加載圖片、腳本和樣式始終可以正常工作，但對另一個服務器的XHR和Fetch調用將失敗，除非該服務器實現了一種方法來允許該連接。 這種方法稱為CORS（Cross-Origin Resource Sharing，跨域資源共享）。 默認情況下，使用@font-face加載Web字體也需要跨域資源共享，還有其他一些不太常見的情況（例如WebGL紋理和Canvas API中加載的drawImage資源）。 在現代瀏覽器中，使用ES模塊（ES Modules）也需要CORS。 如果您沒有在服務器上設置允許提供第三方域的CORS策略，則請求將失敗。 Fetch示例： XHR示例： 如果跨域資源違反以下條件，則會失敗： 不同的域名 不同的子域名 不同的端口 不同的協議 這樣做是為了您的安全，以防止惡意用戶利用Web平台。 但是，如果您控制服務器和客戶端，則有足夠的理由讓它們互相通信。 如何實現呢？ 這取決於您的服務器端堆棧。 瀏覽器支持 非常好（基本上所有瀏覽器，除了IE<10）： 使用Express的示例 如果您使用Node.js和Express作為框架，請使用CORS中間件套件。 下面是一個簡單的Express Node.js服務器實現的例子： const express = require('express') const app = express() app.get('/without-cors', (req, res, next) => { res.json({ msg: '😞 沒有CORS，沒有派對！' }) }) const server = app.listen(3000, () => { console.log('已監聽端口 %s', server.address().port) }) 如果您從不同的源發起fetch請求並使用中間件函數來處理經過響應的端點請求處理程序，則可以使事情正常工作： const express = require('express') const cors = require('cors') const app = express() app....