如何做網(wǎng)站網(wǎng)頁焊工培訓(xùn)心得體會
幾種常見的跨域解決方案&代理的概念
- 一、常見的跨域解決方案
- 1. 服務(wù)端配置CORS（Cross-Origin Resource Sharing）：
- 2. Nginx代理
- 3. Vue CLI配置代理：
- 4 .uni-app在`manifest.json`中配置代理來解決：
- 5. 使用WebSocket通訊
- 6. H5跨域 JSONP方式（通過script標(biāo)簽）
- 7. 去掉www前綴
- 8. Chrome瀏覽器的跨域設(shè)置（適用于本地臨時跨域調(diào)試）
- 二、代理的概念
在 Web 開發(fā)中，跨域問題是指瀏覽器從一個域名的網(wǎng)頁去請求另一個域名的資源時，由于同源策略的限制，請求會被阻止。
解決跨域問題需要可能從后端、中間件、前端等方向入手。
一、常見的跨域解決方案
1. 服務(wù)端配置CORS（Cross-Origin Resource Sharing）：
通過在服務(wù)器端設(shè)置響應(yīng)頭Access-Control-Allow-Origin來允許特定源的跨域請求。
支持多種HTTP方法，如GET、POST、PUT、DELETE等。
示例代碼（PHP）：
header('Access-Control-Allow-Origin: *');
2. Nginx代理
使用 Nginx 設(shè)置代理解決跨域問題的一種常見方式。Nginx 會充當(dāng)一個中間代理服務(wù)器，接收來自前端的請求并將其轉(zhuǎn)發(fā)到實際的后端 API 服務(wù)，從而避免跨域問題。
-
在服務(wù)器上安裝 Nginx
使用以下命令安裝Nginx：-
Ubuntu/Debian:
sudo apt update sudo apt install nginx -
CentOS/RHEL:
sudo yum install nginx
-
-
配置 Nginx 代理
打開 Nginx 的配置文件，通常是在
/etc/nginx/nginx.conf或者/etc/nginx/sites-available/default，根據(jù)你的操作系統(tǒng)和 Nginx 安裝方式來決定。下面是一個示例配置，假設(shè)你的前端應(yīng)用在
http://localhost:8080，后端 API 服務(wù)在http://api.example.com。server {listen 80;# 前端應(yīng)用訪問的地址server_name localhost;# 代理：`http://localhost`→`http://example.com`location / {root /var/www/html; # 指定前端應(yīng)用的根目錄index index.html index.htm;}# 反向代理：分發(fā)到不同的后端 API 服務(wù)location /api/ {proxy_pass http://api.example.com/; 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;}location /websocket/ {proxy_pass http://websocket.example.com/; 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;} }proxy_pass http://api.example.com/;: 將所有/api/路徑的請求轉(zhuǎn)發(fā)到http://api.example.com。proxy_set_header相關(guān)指令用于轉(zhuǎn)發(fā)客戶端的請求頭信息到后端服務(wù)器，這樣后端可以獲得真實的請求信息。
-
重載 Nginx 配置
在修改 Nginx 配置文件后，需要重載 Nginx，使配置生效：sudo nginx -s reload -
CORS 頭部：如果后端已經(jīng)配置了 CORS 頭部，那么你可以在 Nginx 上的代理配置中添加相關(guān)的 CORS 頭部，或者在后端服務(wù)中處理：
location /api/ {proxy_pass http://api.example.com/;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;# CORS 頭部add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
}
- 路徑重寫：有時需要在代理時對路徑進(jìn)行重寫。例如，前端請求
/api，但后端實際接收的路徑是/v1/api，這時可以使用rewrite來修改請求路徑：
location /api/ {rewrite ^/api/(.*)$ /v1/$1 break;proxy_pass http://api.example.com/;
}
3. Vue CLI配置代理：
module.exports = {
devServer: {
proxy: {
‘/api’: {
target: ‘http://localhost:8818’,
changeOrigin: true,
pathRewrite: { ‘^/api’: ‘’ }
}
}
}
};
4 .uni-app在manifest.json中配置代理來解決：
針對uni-app框架 有專門的配置方法。
"h5": {"devServer": {"https": false,"port": 8080,"proxy": {"/apis": {"target": "https://www.ucharts.cn","changeOrigin": true,"pathRewrite": {"^/apis": ""}}}}
}
這將把以/apis開頭的請求代理到https://www.ucharts.cn，從而解決跨域問題。
5. 使用WebSocket通訊
傳統(tǒng)的 HTTP 請求會受到同源策略的嚴(yán)格約束，而 Websocket 協(xié)議不受同源策略的限制。WebSocket通過“ws://"(非加密)或“wss://”(加密)協(xié)議進(jìn)行通信，連接建立后，全雙工通信得以實現(xiàn)，并且不遵循 HTTP 的同源策略。
6. H5跨域 JSONP方式（通過script標(biāo)簽）
JSONP（JSON with Padding）是一種古老的跨域解決方案。
原理是利用< script >標(biāo)簽的src屬性不受同源策略限制的特點。
適用于GET請求，不適用于POST等其他類型請求。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>JSONP跨域示例</title>
</head> <body> <script> function jsonpCallback(data) { console.log(data); } </script> <script src="http://目標(biāo)服務(wù)器地址?callback=jsonpCallback"></script>
</body> </html>
這里http://目標(biāo)服務(wù)器地址是提供數(shù)據(jù)的服務(wù)器地址，callback=jsonpCallback是將回調(diào)函數(shù)名作為參數(shù)傳遞給服務(wù)器，服務(wù)器收到請求后，會將數(shù)據(jù)包裝在回調(diào)函數(shù)中返回，例如返回的數(shù)據(jù)可能是jsonpCallback([{ "name": "張三", "age": 25 }])，這樣前端頁面就可以通過回調(diào)函數(shù)獲取到跨域的數(shù)據(jù)。
7. 去掉www前綴
有些情況下，去掉訪問地址的www前綴可能會解決跨域問題。這是因為有些服務(wù)器配置中，www子域名和主域名被視為不同的域。當(dāng)去掉www前綴后，可能會使請求在同源策略下被允許。
例如，原本請求www.example.com會出現(xiàn)跨域問題，嘗試訪問example.com 可能就不會有跨域限制。但這種方法并不是通用的解決方案，它取決于服務(wù)器的具體配置，而且也可能帶來一些其他問題，比如搜索引擎優(yōu)化（SEO）方面的影響等。同時，如果是因為協(xié)議、端口不同導(dǎo)致的跨域，這種方法也無法解決。
8. Chrome瀏覽器的跨域設(shè)置（適用于本地臨時跨域調(diào)試）
在開發(fā)過程中，可能需要臨時繞過瀏覽器的同源策略——啟動一個禁用Web安全策略的Chrome實例。
請注意，這種方法僅適用于開發(fā)環(huán)境，且存在安全風(fēng)險，務(wù)必謹(jǐn)慎使用。
通過啟動Chrome瀏覽器時添加特定參數(shù)來實現(xiàn)：
將谷歌瀏覽器的桌面快捷方式復(fù)制一份，右鍵屬性將目標(biāo)的路徑后輸入
--disable-web-security --disable-web-security --user-data-dir=C:\chromTest參數(shù)
參考：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-web-security --user-data-dir=C:\chromTest
二、代理的概念
常用的代理技術(shù)分為正向代理、反向代理和透明代理。
正向代理：將多個不同域名的網(wǎng)站請求統(tǒng)一到一個目標(biāo)服務(wù)器請求
反向代理：將多個不同域名的網(wǎng)站請求根據(jù)需要分發(fā)給不同的后端應(yīng)用服務(wù)器
透明代理：一種網(wǎng)絡(luò)中間件，它能夠在用戶不知情的情況下攔截和轉(zhuǎn)發(fā)網(wǎng)絡(luò)流量。這種代理不需要在用戶端配置特定的代理設(shè)置，而是通過在網(wǎng)絡(luò)層面攔截流量來實現(xiàn)代理功能。
