vue, react. nginx 配置反向代理,解决跨域问题
前端请求
如果配置了 wss 协议, 可以将ws 替换为 wss
这里和我们通常使用的方式不同websocket 需要传入完整的地址,然后才能去做代理
let url = `${location.protocol === 'https' ? 'wss' : 'ws'}://${location.host}/ws/socket/io`;
const socket = new WebSocket(url);
vite.config.ts给 将 proxy
如果配置了 wss 协议, 可以将ws 替换为 wss
"/ws": {
target: "ws://localhost:8888", // 后端地址
changeOrigin: true, //支持跨域
ws: true, // 是否启用WebSocket代理
rewrite: (path) => path.replace(/^\/ws/, ""), // 重写
},
服务器 nginx 代理配置 ,配置后刷新就好了
# nginx配置websocket
location /ws/ {
rewrite /ws/(.*) /$1 break;
proxy_pass http://127.0.0.1:7000/; #websocket地址
proxy_http_version 1.1;
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_read_timeout 120s;
proxy_set_header Upgrade websocket;
proxy_set_header Connection Upgrade;
}
大概就这样,如果有问题后面胡补充@