跨域資源共享（CORS）
介紹跨域資源共享，一種讓客戶端和服務器通信的方式，即使它們不在同一個域 在瀏覽器中運行的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....