??? ???? ?? ???? ?? ??? ??????, ?????? ?? ???? ????? ???. ?? ??? ? ???? ? ?? ?? ??? ??? ?? ???? ??? ?? ??? ???? ?? ??????.
??? ??? ????? ???? ??? ? ??? ???? ? ?? ???? ??? ?? ???? ?????.
?? ????? ?????
?? ???? ?? ????? ?? ?? URL ??? ???????.
URL ???? ????? ????, ??? ??, ?? ??, ??? ?????. , ?? ???? ? ?? ?? ??.
URL? ?? ??? ????.
https://www.example.com:8080/path/resource.html?page=1&sort=desc#header
?? ???:
● ????? HTTPS???.
● ??? ??? www.example.com
● ?? ??? 8080???.
● ??? /path???. /resource.html
● ?? ????? page=1&sort=desc
● ??? header
?? ??? ???? ?? URL? ????, ??? ?? ? ?? ??? ??? ??.
? URL? ?? ?? ??? ?? ?? ??? ??? ????? ?????.
http://www.example.com:8080/ // 協(xié)議不同 https://www.example.a.com:8080/ // 主機(jī)名不同 https://www.example.com:8081/ // 端口號不同
? ??? ??????
?????? ??? ?? ??? ??????. ????? ?? ?? ??? ??.
所謂同源策略，其實(shí)是瀏覽器的一種安全機(jī)制，用于限制一個(gè)網(wǎng)頁中的網(wǎng)絡(luò)請求僅能夠訪問來自同一源（域名、協(xié)議和端口號均相同）的資源，主要目的是防止惡意網(wǎng)站通過腳本竊取其他網(wǎng)站的敏感數(shù)據(jù)，保障用戶的隱私和安全。
???? ? ????(js ??)? ?? ???? ???? ???? ????? ??? ? ??? ?????.
??? ??? ??? ???? ??
?? ????? ??? ??? ??? ??? ????? ?? ?? ??? ?? ????? ??? ??? ??? ???? ???? ???? ??? ????? ???? ??????. :
1. ??? ??
??? ???? ???? ??? ? ??? ???? ?? ?? ????? ???? ???? ??? ??? ???? ????.
??? ?? ??? ??? ??? ???? ?? ?? ?? ??? ????? ?? ???? ???? ???? ??? ?? ????? ??? ??? ??? ??? ?????. ?? ???? ?? ?? ??? ????.
????? ????? ????? ??? ????? webpack? ?? ?????? ??? ??? ???? ?????. ????? ????? ?????? ???? ??? ???? ?? ??? ??? ??? ??? ?????. , ??? ?? ??? ?? ??? ???? ?? ???? ??? ??? ?????? ?????. ??? ??? ? ?????? ?? ??? ?? ?? ?? ??? ???? ?? ??? ??? ??, ??? ? ??? ? ????.????? ????? ??? ???? ???? ??? ?????? ??? ????.
???? ??? ??? ??? ??? ?? ???? ??? ??? ??????1. ??? ??
??? ????? ?????nginx? ??? ???? ???? ????? ??? ?? ?????? ?????.
nginx? ??? ??? ? ??, ??? ??, ??? ????? Windows? Linux ???? ??? ? ????.?? ? ??? ? ??? ???? ?? ??? ??? ???? ?? ??? ??? ??? ?? URL? ?? ?? ??? ??? ?? ?? ??? ??? ??? ?? ? ??? ???? ????.
2. ?? ??
?? ????? webpack?? vite ?? ?? ????? ???? ??? ??? ?? ?????? ??? ? ?? ??? ???? ???? ?????. http-proxy-middleware ???? . http-proxy-middleware ????? ??? http-proxy? ??? ???? ????.
???http-proxy-middleware? ???? ?????? ?? ?? ??? ???? ?? ?????.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = {
server: {
proxy: {
// 將 /api/* 的請求代理到 http://localhost:3000/*
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: { '^/api': '/' }
}
}
}
};?? ????? ?? ??? ?? ???? http-proxy ?????? ???? ?? ??? ??? ? ????. ?? ??? ?? ??, ?? ?? ??? ?? ????? ???? ? ????. :
1. ?? ???? ??? ? ??(?? ??)? ?? ?? npm init -y? ???? ???. ????? ???? ?? ????? ??? ??????????:
npm init -y
2. ?? ?? ???? ?? ????? index.html ??? ??? ?? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>請求轉(zhuǎn)發(fā)測試</title>
</head>
<body>
<h1>請求轉(zhuǎn)發(fā)測試</h1>
<p id="message"></p>
<script>
fetch('/api/login')
.then(response => response.text())
.then(data => {
document.getElementById('message').textContent = data;
});
</script>
</body>
</html>3. ?? ?? ? ? ????. ??? ??? ???? ?? ???? ?? ???? .js ??? ??????.
index.js ??? ?? ?? ??? ?? ??? ??? ???? ?? ?? ?????.
const http = require('http');
const httpProxy = require('http-proxy');
const fs = require('fs');
const path = require('path');
// 創(chuàng)建代理服務(wù)器實(shí)例
const proxy = httpProxy.createProxyServer({});
// 創(chuàng)建HTTP服務(wù)器
const server = http.createServer((req, res) => {
if (req.url === '/' || req.url.endsWith('.html')) {
// 讀取HTML文件
const filename = path.join(__dirname, 'index.html');
fs.readFile(filename, 'utf8', (err, data) => {
if (err) {
res.writeHead(500);
res.end('Error reading HTML file');
} else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(data);
}
});
} else if (req.url.startsWith('/api')) {
// 重寫路徑，替換跨域關(guān)鍵詞
req.url = req.url.replace(/^\/api/, '');
// 將請求轉(zhuǎn)發(fā)至目標(biāo)服務(wù)器
proxy.web(req, res, {
target: 'http://localhost:3000/',
changeOrigin: true,
});
}
});
// 監(jiān)聽端口
server.listen(8080, () => {
console.log('Server started on port 8080');
});4. ?? ?? ??? ? ??? ???? ?? ?? ?? target.js ??? ??? ?????.
const http = require('http');
const server = http.createServer((req, res) => {
if (req.url.startsWith('/login')) {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('我是localhost主機(jī)3000端口下的方法，恭喜你訪問成功!');
} else {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello, world!');
}
});
server.listen(3000, () => {
console.log('Target server is listening on port：3000');
})5. 打開終端，輸入啟動目標(biāo)服務(wù)器的命令：
node ./target.js //項(xiàng)目根目錄下執(zhí)行
6. 再開一個(gè)終端啟動代理服務(wù)器，等待瀏覽器端發(fā)起請求就可以啦：
node ./index.js //項(xiàng)目根目錄下執(zhí)行
7. 最后在瀏覽器里訪問http://localhost:8080, 打開控制臺即可查看效果：
可以發(fā)現(xiàn)，瀏覽器network模塊的網(wǎng)絡(luò)請求確實(shí)是訪問的8080端口的方法，但是我們的服務(wù)器默默的做了請求轉(zhuǎn)發(fā)的功能，并將請求轉(zhuǎn)發(fā)獲取到的內(nèi)容返回到了前端頁面上。
其實(shí)http-proxy是對node內(nèi)置庫http的進(jìn)一步封裝，網(wǎng)絡(luò)請求的核心部分還是使用http創(chuàng)建一個(gè)服務(wù)器對象去訪問的。感興趣的同學(xué)可以再讀讀http-proxy的源碼~
除了代理服務(wù)器這種繞過瀏覽器同源策略的解決方式外，從前端的角度解決跨域問題還有如下一些常見的方法：
1.借助JSONP
JSONP的原理是通過動態(tài)創(chuàng)建
??? ???? ?? ???? ?? ??? ??? ?? AI ?? ? ???? ?? ???? ??? AI ?????. AI ? ??? ??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????! ???? ?? ?? ?? ??? ??? ??, ???? ?? ????. ??? PHP ?? ?? ?? ??? ? ?? ?? ? ??? ?? ?? ?????(SublimeText3)
? AI ??
Undress AI Tool
Undresser.AI Undress
AI Clothes Remover
Clothoff.io
Video Face Swap
?? ??
??? ??
???++7.3.1
SublimeText3 ??? ??
???? 13.0.1 ???
???? CS6
SublimeText3 Mac ??
PHP ??? ??? ? PHP ??? ???? ??? ?????? PHP ??? ???? ? ?? ???? ??
May 23, 2025 pm 08:33 PM
PHP ??? ?? ?? ???? ??? ? ????. 1. ?? ?? ???? "PHP ?? ??"? ?? ???? ????? ?????. 2. ??? ?? ?? ????? ?? ? ??? ?? ????? ?? ???????. 3. IDE?? ???? ?? ??? ??? ??????. 4. ??? PHP ?? ?? ?? ?? ?? ???? ???? ???????.
nginx, ?? ?? ?? ? ?? ??? ?? ? ?
May 16, 2025 pm 10:54 PM
Nginx? ?? ?? ??? ?? ??? ???? ?? ? ??? ????? ???? ? ???? ??? ?? ?????. 1) ?? ?? ??? ????? /etc/nginx/nginx.conf???. ??? nginx-t ??? ???? ??? ??? ? ? ????. 2) ?? ???? ?? ?? (? : ???, Worker_Processes) ? HTTP ?? (? : log_format)? ?????. ??? ??? ?? ??? ?? ??? ?? ? ??? ?????. ??? ???? ?? ?? ??? ?? ???? ??? ? ????.
Linux? ??? ???? ???? ??? ?????? Ulimit? ???? ???
May 29, 2025 pm 11:09 PM
Linux System? Ulimit ??? ?? ??? ???? ???? ??? ??? ??? ?????. 1. ulimit? ?? ??? ? (-n), ??? ?? (-v), ??? ??? (-u) ?? ?? ? ??? ?? ? ? ?????. 2. ULIMIT-N2048? ?? ?? ??? ?? ULIMIT ??? ?? ????? ?? ???? ?????. 3. ??? ? ??? ???? /etc/security/limits.conf ? pam ?? ??? ???? sessionRequiredPam_limits.so? ???????. 4. SystemD ???? ?? ???? lim? ???????.
Debian Nginx ?? ??? ??????
May 29, 2025 pm 11:06 PM
Debian ????? Nginx? ?? ? ? ??? ???? ????. ?? ??? ?? ?? ??? ?? : ??? ??? ? ? ?? ???? ??? ?? ?? NGINX ???? ??? ??? ?? ?? ??? ??????. ??? ?? ?? : NGINX? ???? ??? ???? ??? ???? ?? ?? ????? ?? ?????. HTTP ??? ?? : HTTP ???? ??? ?? ??? ???? ??? ?? ?? ? ?? ??? ???? ? ????. ?? ?? ?? worker_connections : ? ??? ???? ?? ? ??? ?? ?? ?? ???? ????? 1024? ?????. Multi_accept : ?? ?? ?? ??? ????? ?? ?? ??? ??????. ??
Debian Apache2? SEO ??? ??? ??????
May 28, 2025 pm 05:03 PM
Debianapache2? SEO ??? ??? ?? ??? ????. ??? ??? : Keyword Magic Tools? ?? ?? (? : ??? ?? ??)? ???? ???? ?? ? ?? ???? ?????. ??? ??? ?? : ???? ??? ? ???? ????, ???? ??? ??? ??? ???? ?? ??? ? ??? ???????. ??? ???? ? ?? ??? : ??? ??? ???? ??? ?????. ???? ??? ??? ??? ??????. ??? ???? ?? ??? ??????. ?? ? ???? ?? ?????? ???? ??? ??????. ? ???? ???? ???? ??????. ?? ?? SEO ?? : robots.txt ?? : ?? ?? ???? ??? ??? ?????. ? ????? ??? : ?? ???? ? Apache ??? ???? ???
PHPStorm ? Docker Containerized ?? ??? ??????
May 20, 2025 pm 07:54 PM
Docker Containization ??? ?? PHP ???? PHPStorm? ???? ?? ???? ?? ???? ???? ? ????. ?? ??? ??? ????. 1. PHP ??? ???? ?? Dockerfile? ????. 2. phpstorm?? Docker ??? ?????. 3. ???? ???? ?? dockercompose ??? ????. 4. ?? PHP ???? ??????. ??? ??? ?? ?????, ???? ? ?? ??? ??? ???? ?????.
Nginx ???? ?? ??? ???? ?? ??
May 16, 2025 pm 10:39 PM
nginx ??? ???? ??? ??? ????. 1. Systemd ??? ?? ?? : Sudonano/etc/systemd/system/nginx.service ? ?? ??? ?????. 2. SystemD ??? ???? : sudosystemctldaemon-reload. 3. nginx? ???? ?? ? ? ??? ??? : sudosystemctlenablenginx. ??? ??? ?? NGINX? ???? ???? ???? ????? ? ??? ?? ?? ????? ??? ? ??? ??? ?????.
????? Docker? ?? ??? ???? ??
May 28, 2025 pm 04:33 PM
??? ????? Docker? ?? ?? ??? ??? ???? ?? ? ? ????. ??? ?? ???? ??? ????. 1 Docker ?? ??, Debian ???? ?? ??? ??????. Sudoaptupdatesudoaptupgrade-y ??? ??? ????? ???? ???? HTTPS? ?? ???? ?? ??? ???? ????? : Sudoaptinstallapt-Transportwortwartware-Common-Y Import gpg Key? ?? GPG ? : CULL.
