企業(yè)網(wǎng)站設(shè)計費(fèi)做哪個科目,北京監(jiān)理協(xié)會培訓(xùn)網(wǎng)站,廣州公司注冊核名查詢系統(tǒng)官網(wǎng),有名設(shè)計網(wǎng)站在前端開發(fā)中#xff0c;跨域是一個繞不開的話題。無論是調(diào)用第三方 API#xff0c;還是前后端分離項目中的本地聯(lián)調(diào)#xff0c;我們都可能遇到它。一、什么是跨域問題#xff1f;要理解跨域#xff0c;首先要知道什么是同源策略。同源策略#xff08;Same-O…在前端開發(fā)中跨域是一個繞不開的話題。無論是調(diào)用第三方 API還是前后端分離項目中的本地聯(lián)調(diào)我們都可能遇到它。一、什么是跨域問題要理解跨域首先要知道什么是同源策略。同源策略Same-Origin Policy是瀏覽器最核心也是最基本的安全功能。它規(guī)定了一個源origin的文檔或腳本不能讀取或修改另一個源的文檔屬性。所謂同源指的是協(xié)議、域名、端口號三者完全相同。舉個例子URL AURL B是否同源原因http://www.example.com/http://www.example.com/dir/page.html是協(xié)議、域名、端口均相同http://www.example.com/https://www.example.com/否協(xié)議不同 (http vs https)http://www.example.com/http://api.example.com/否域名不同 (www.example.com vs api.example.com)http://www.example.com:80/http://www.example.com:8080/否端口不同 (80 vs 8080)跨域Cross-Origin就是指一個源的文檔或腳本試圖請求另一個源的資源。當(dāng)瀏覽器發(fā)現(xiàn)這是一個跨域請求并且該請求不符合某些安全例外如 CORS瀏覽器就會出于安全考慮阻止該請求或限制對響應(yīng)的訪問這就是我們常說的跨域問題。注跨域問題本質(zhì)上是瀏覽器的行為。服務(wù)器之間如后端服務(wù) A 調(diào)用后端服務(wù) B的 HTTP 請求不存在跨域問題。二、前端為什么會有跨域問題同源策略的存在主要是為了保護(hù)用戶信息安全防止惡意網(wǎng)站竊取數(shù)據(jù)。想象一下如果沒有同源策略你登錄了網(wǎng)上銀行 https://mybank.com瀏覽器保存了你的登錄憑證Cookie。你在不經(jīng)意間訪問了一個惡意網(wǎng)站 https://evil.com。這個惡意網(wǎng)站的頁面里有一段 JavaScript 代碼向 https://mybank.com/api/transfer?tohackeramount10000 發(fā)起了請求。由于沒有同源策略瀏覽器會自動附上 mybank.com 的 Cookie服務(wù)器會驗證通過執(zhí)行轉(zhuǎn)賬操作。你的錢就這樣被悄無聲息地轉(zhuǎn)走了。同源策略就是為了防止這種情況發(fā)生。它限制了 evil.com 的腳本讀取 mybank.com 返回的響應(yīng)數(shù)據(jù)從而保護(hù)了用戶信息。三、如何解決跨域問題既然跨域是瀏覽器的一種安全限制那么解決方案也必然圍繞如何“告訴”瀏覽器這個跨域請求是安全的或者如何繞過這個限制。以下是幾種主流的解決方案1. CORS (Cross-Origin Resource Sharing) - 跨域資源共享這是目前最推薦、最規(guī)范的解決方案。它是一種 HTTP 機(jī)制允許服務(wù)器標(biāo)示除了它自己以外的其他 origin域、協(xié)議或端口這樣瀏覽器就可以訪問加載這些資源。CORS 的工作原理是當(dāng)瀏覽器發(fā)起一個跨域請求時它會自動在請求頭中添加一些信息如 Origin服務(wù)器根據(jù)這些信息判斷是否允許該跨域請求并在響應(yīng)頭中返回相應(yīng)的許可信息。瀏覽器收到響應(yīng)后如果檢查到服務(wù)器允許該請求就不會報錯。簡單請求和預(yù)檢請求CORS 將請求分為兩類簡單請求滿足一定條件如方法是 GET/POST/HEADContent-Type 為 application/x-www-form-urlencoded、multipart/form-data 或 text/plain的請求。瀏覽器會直接發(fā)送請求并在響應(yīng)頭中檢查 Access-Control-Allow-Origin。非簡單請求如使用 PUT、DELETE 方法或 Content-Type 為 application/json 的請求。瀏覽器會先發(fā)送一個 OPTIONS 方法的“預(yù)檢請求”Preflight Request到服務(wù)器詢問是否允許該跨域請求。服務(wù)器確認(rèn)允許后瀏覽器才會發(fā)送真正的請求。服務(wù)端配置示例 (Node.js Express)const express require(express); const app express(); const port 3001; // 后端服務(wù)端口 // 允許所有源跨域 (僅用于開發(fā)生產(chǎn)環(huán)境應(yīng)指定具體域名) app.use((req, res, next) { res.header(Access-Control-Allow-Origin, *); // 或 http://localhost:3000 res.header(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); res.header(Access-Control-Allow-Headers, Content-Type, Authorization, X-Requested-With); // 如果需要攜帶 Cookie // res.header(Access-Control-Allow-Credentials, true); // 處理預(yù)檢請求 if (req.method OPTIONS) { res.sendStatus(200); } else { next(); } }); app.get(/api/data, (req, res) { res.json({ message: 這是來自跨域服務(wù)器的數(shù)據(jù) }); }); app.listen(port, () { console.log(后端服務(wù)運(yùn)行在 http://localhost:${port}); });前端調(diào)用示例 (使用 Fetch API)// 假設(shè)前端運(yùn)行在 http://localhost:3000 fetch(http://localhost:3001/api/data) .then(response response.json()) .then(data console.log(data)) .catch(error console.error(Error:, error));企業(yè)開發(fā)實踐在生產(chǎn)環(huán)境中Access-Control-Allow-Origin 不應(yīng)設(shè)置為 *而應(yīng)設(shè)置為前端應(yīng)用的域名如 https://www.myapp.com以增強(qiáng)安全性。通常這些 CORS 頭會在反向代理如 Nginx或 API 網(wǎng)關(guān)層面統(tǒng)一配置。2. 代理服務(wù)器代理服務(wù)器是解決跨域問題的“萬能鑰匙”。其核心思想是瀏覽器有跨域限制但服務(wù)器之間沒有。原理前端應(yīng)用向同源的代理服務(wù)器發(fā)送請求。代理服務(wù)器接收到請求后將其轉(zhuǎn)發(fā)給真正的目標(biāo)后端服務(wù)器跨域。后端服務(wù)器將響應(yīng)返回給代理服務(wù)器。代理服務(wù)器再將響應(yīng)返回給前端應(yīng)用。對于前端來說它始終是在和同源的代理服務(wù)器通信因此不存在跨域問題。企業(yè)開發(fā)實踐開發(fā)環(huán)境 前端構(gòu)建工具如 Vite, Webpack通常內(nèi)置了代理功能。Vite ( vite.config.js )import { defineConfig } from vite; export default defineConfig({ server: { proxy: { /api: { target: http://localhost:3001, // 真實后端服務(wù)地址 changeOrigin: true, // 修改請求頭中的 Origin 為目標(biāo)地址 // 可選重寫路徑 // rewrite: (path) path.replace(/^/api/, ) } } } });注意前端代碼中請求 /api/dataVite 開發(fā)服務(wù)器會自動將其代理到 http://localhost:3001/api/data。Webpack (vue.config.js 或 webpack.config.js)module.exports { devServer: { proxy: { /api: { target: http://localhost:3001, changeOrigin: true, pathRewrite: { ^/api: } // 重寫路徑移除 /api } } } };生產(chǎn)環(huán)境 通常使用 Nginx 作為反向代理。Nginx 配置示例 (nginx.conf)server { listen 80; server_name www.myapp.com; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; # SPA 路由支持 } location /api/ { proxy_pass http://backend-server:3001/; # 后端服務(wù)地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }這樣前端訪問 www.myapp.com/api/dataNginx 會將其代理到 http://backend-server:3001/data。3. JSONP (JSON with Padding) - 僅支持 GET 請求JSONP 是一種比較“古老”的跨域解決方案它利用了 script 標(biāo)簽不受同源策略限制的特性。原理前端定義一個回調(diào)函數(shù)如 handleResponse 。創(chuàng)建一個 script 標(biāo)簽其 src 指向跨域 API并將回調(diào)函數(shù)名作為參數(shù)傳遞如 http://api.example.com/data?callbackhandleResponse 。服務(wù)器接收到請求后將數(shù)據(jù)包裹在回調(diào)函數(shù)中返回如 handleResponse({name: Alice, age: 25}); 。瀏覽器接收到并執(zhí)行這段 JavaScript從而調(diào)用前端定義的回調(diào)函數(shù)并將數(shù)據(jù)作為參數(shù)傳入。服務(wù)端示例 (Node.js Express)const express require(express); const app express(); const port 3002; app.get(/api/jsonp, (req, res) { const callbackName req.query.callback; const data { message: 這是 JSONP 返回的數(shù)據(jù) }; const script ${callbackName}(${JSON.stringify(data)}); res.send(script); }); app.listen(port, () { console.log(JSONP 服務(wù)運(yùn)行在 http://localhost:${port}); });前端調(diào)用示例function handleResponse(data) { console.log(JSONP 響應(yīng):, data); } function loadJSONP() { const script document.createElement(script); script.src http://localhost:3002/api/jsonp?callbackhandleResponse; document.body.appendChild(script); // 可選請求完成后移除 script 標(biāo)簽 script.onload () { document.body.removeChild(script); }; } loadJSONP();缺點(diǎn)只支持 GET 請求。安全性較低容易受到 XSS 攻擊如果服務(wù)器對回調(diào)函數(shù)名過濾不嚴(yán)。錯誤處理困難?，F(xiàn)在CORS 已經(jīng)普及JSONP 逐漸被淘汰但在與一些只支持 JSONP 的老舊第三方服務(wù)交互時可能還會用到。4. 其他方案了解即可WebSocket WebSocket 協(xié)議不受同源策略限制可以進(jìn)行跨域通信。postMessage 用于不同窗口iframe、popup之間的安全跨域通信。document.domain 只適用于主域相同、子域不同的情況如 a.example.com 和 b.example.com 現(xiàn)在已不推薦使用。四、方案的對比與選擇跨域是瀏覽器安全策略同源策略導(dǎo)致的問題目的是保護(hù)用戶數(shù)據(jù)。CORS 是現(xiàn)代 Web 開發(fā)解決跨域問題的標(biāo)準(zhǔn)方案需要后端服務(wù)器設(shè)置特定的 HTTP 響應(yīng)頭。代理服務(wù)器是一種非常實用的繞過方案尤其在開發(fā)環(huán)境和需要統(tǒng)一 API 網(wǎng)關(guān)的生產(chǎn)環(huán)境中。JSONP 是一種過時的技術(shù)僅在特定兼容性需求下考慮。