掌握ChatGPT插件與自定義GPT
客戶端-服務器關系。
這樣應用程序的前端和后端就可以相互通信和共享資源。但是 Web 應用程序的客戶端始終在瀏覽器上運行。這就產生了一些復雜情況，因為前端開發人員無法完全控制很多事情。
網絡瀏覽器已經存在了幾十年。它們的存在改變了網絡應用程序的工作方式，尤其是其安全性方面。這就是為什么瀏覽器默認對所有客戶端應用程序實施同源策略。此策略規定，如果在瀏覽器上運行的應用程序從與您的應用程序來源不同的服務器請求資源，則瀏覽器將默認阻止該請求。
來源通常由域名、端口號和方案組成。方案表示 URL 的協議 — 例如，它是 HTTP 還是 HTTPS。域名和端口號一起表示 URL 中您或其他用戶可見的部分。
因此，如果您的 Web 應用程序在 abcd.com 上運行，并且您嘗試請求位于 xyz.com 的資源，則瀏覽器（您的 abcd.com 正在其中運行并向 xyz.com 發出請求）將啟動其同源策略。
現在的問題是，你的應用程序需要來自不同來源的提供商的資源。這個問題有很多用例。
首先，您可以為您的 Web 應用程序采用解耦的客戶端-服務器架構。這意味著您可以擁有一個在 abcd.com 上運行的完全獨立的前端和一個在 xyz.com 上運行的獨立后端。您需要它們相互交互，但由于它們位于不同的域上，并且本質上來自不同的來源，因此您無法實現。
另一個用例是與第三方 API 和服務交互。您可以使用第三方 API 在您的網站上進行付款，或者使用第三方服務來處理應用程序上的身份驗證。
無論用例如何，第三方服務總是會與您的應用程序有不同的來源。
為了讓您的應用程序與不同來源的 Web 服務器和 API 進行交互，您需要 CORS。CORS 將告訴瀏覽器取消其同源策略并啟用相應客戶端和服務器之間的資源共享。這就是 CORS 對您有所幫助的原因和方式。如果您想了解有關 CORS 的更多信息，請查看這本深入探討該主題的 精彩指南。
現在我們來回答第一個問題，誰來實際設置 CORS？
由于資源是從服務器檢索的，因此服務器可以完全控制哪些客戶端可以訪問它。出于同樣的原因，啟用 CORS 也是在服務器端完成的。
這意味著您的應用程序中將有一個后端組件。該后端組件應該確保將為哪些 URL 或客戶端啟用 CORS。
現在來回答第二個問題。至于如何啟用 CORS，讓我們寫一些代碼吧！
在本教程中，我們將重點介紹使用 Node.js 和 Express 構建的后端，該后端使用 TypeScript 編寫。我有一個類似的 JavaScript 教程，您也可以查看。?
在您選擇的目錄中，通過運行以下命令創建一個新的 npm 項目：
mkdir nodejs-ts-cors && npm init -y
然后，我們通過運行以下命令安裝 TypeScript 作為開發依賴項：
npm i --save-dev typescript
如果您打開項目，您現在應該有一個package.json文件、一個package-lock.json文件和一個node_modules文件夾。
接下來，在項目根目錄下創建一個名為tsconfig.json的文件。此文件將指定 TypeScript 構建項目的所有配置。在其中添加以下代碼：
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist"
},
"lib": ["es2015"]
}最后，我們需要替換package.json文件中的主要條目：
...
"main": "dist/server.js"
...
并添加一個新腳本，該腳本可以在從 TypeScript 編譯后在運行時直接運行我們的 JavaScript 代碼：
...
"scripts": {
"start": "tsc && node dist/server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
...在創建用于發送資源的端點之前，我們需要設置服務器。要創建服務器，我們將安裝 Express，如下所示：
npm i --save express@4.17.1
要將 Express 與 TypeScript 的類和類型一起使用，我們還需要安裝types/express， 如下所示：
npm install -save-dev @types/express@4.17.1
現在在根目錄中創建一個名為server.ts的文件，內容如下：
const app:any = express();
const port:Number = 3000;
app.get('/', (req, res) => {
res.send('NodeJS + Express + Typescript App Up! ??');
});
app.listen(port, () => {
console.log(Server running on port ${port});
});如果你現在運行命令npm run start，我們的 TypeScript 編譯器將編譯我們的server.ts文件，在dist/server.js文件中生成其等效的 JavaScript 代碼，并在本地主機上提供服務。如果你訪問“http://localhost:3000”，你應該會得到以下響應：
您將收到的回復視圖。
太棒了！現在讓我們創建一個發回一些資源的簡單端點。
讓我們編寫一個簡單的 REST API 來返回一些 JSON 數據。我們將創建一個端點/dog來返回一些關于（您猜對了）狗的 JSON 數據！
app.get('/dog',(req,res)=>{
res.json({
'name':'Bruno',
'age':'5',
'image':'https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-800x825.jpg'
})
})太棒了！現在讓我們測試一下。您需要重新運行npm run start 命令。如果您現在訪問“http://localhost:3000/dog”，您應該會得到以下響應：
您將收到的回復視圖。
因此，現在 TypeScript 中似乎有一個 GET API 可以返回一些資源。但是，當我們從 React 或 Angular 等客戶端應用程序請求此資源時會發生什么？
為了演示這一點，我們將創建一個 React 應用并嘗試向上述端點發出請求。首先，讓我們通過運行以下命令創建一個新的 React 項目：
npx create-react-app dog-app
完成后，打開項目并使用以下代碼更新App.js文件：
import {useState} from 'react';
import './App.css';
function App() {
const [dogData,setDogData]=useState();
const getDogData=async()=>{
const response=await fetch('http://localhost:3000/dog');
const data=await response.json();
setDogData(data);
}
return (
<div className="App">
<header className="App-header">
<button onClick={getDogData} disabled={dogData}>Get Dogg!</button>
{dogData &&
<div>
<h3>{dogData?.name}</h3>
<h3>{dogData?.age}</h3>
<img src={dogData?.image} />
</div>
}
</header>
</div>
);
}
export default App;此代碼在頁面上呈現一個按鈕。單擊按鈕時，它會調用一個函數，該函數向端點“http://localhost:3000/dog”發出請求。然后，它會獲取收到的資源或 JSON 數據，將該數據推送到應用組件的狀態，并將其顯示在頁面上。
讓我們測試一下。您必須運行 npm 才能開始運行它，并且它可能會要求您在其他端口上打開此應用程序，因為我們已經將端口 3000 用于 TypeScript 和 Express 后端服務器。一旦它進入您的瀏覽器，如果您按下Get Dogg!按鈕，您應該會在控制臺上收到如下錯誤：
點擊“Get Dogg!”按鈕后出現 CORS 錯誤。
我們需要消除該 CORS 錯誤。一種解決方案是，我們可以為該客戶端手動啟用端點上的 CORS。我們可以通過在響應的標頭上添加鍵“Access-Control-Allow-Origin”來實現這一點。此鍵的值是您希望為其啟用 CORS 的應用程序或客戶端的 URL。
在我們的例子中，它是“http://localhost:3001”或你的 React 應用程序正在運行的任何位置。
app.get('/dog',(req,res)=>{
res.set('Access-Control-Allow-Origin', 'http://localhost:3001');
...
})
現在您的 React 應用程序將能夠從“http://localhost:3000”訪問資源。如果您刷新后端，請再次單擊“Get Dogg!”按鈕。
Get Dogg! 按鈕正在運行。
我們現在可以從 TypeScript API 中取回數據！太棒了。我們已成功在 Node.js 和 TypeScript 應用程序中啟用 CORS。
還有另一種在 Node.js 和 TypeScript 服務器中啟用 CORS 的巧妙方法。您可以使用 CORS 中間件依賴項，它允許您以更自定義的方式輕松配置 CORS。Node.js 的實現類似于 TypeScript，您可以在本教程中了解如何執行此操作。
如果您想要針對這個古老的 CORS 問題進行前端特定的破解，這里有針對React和Angular的解決方案。但請記住，處理 CORS 的正確方法是在服務器上設置適當的訪問控制允許來源。但總而言之，我希望這足以幫助您掌握 CORS 并了解如何在 Node.js 和 TypeScript 應用程序中啟用它。
