端口转发与跨域处理

跨域解决方案

registry.addMapping(“/**”)​​作用​​：指定CORS配置应用于所有接口路径
.allowedOrigins(“*”)​​作用​​：允许所有域名（Origin）访问资源
通过这种方式就能解决跨域

端口转发？新的跨域解决方法

在使用若依框架的后端去对接自己写的app前端时，发现没有出现跨域问题，这个时候去进行了查询才知道，是若依做了端口转发，尽管app在8081，但是依旧不算跨域
端口转发（Port Forwarding）也可以避免跨域问题（CORS），其核心原理是通过 中间代理服务器 将不同端口的请求统一转发到目标服务，使浏览器认为所有请求来自同一源（同协议、同域名、同端口）。以下是详细解析：

---

一、端口转发如何解决跨域？

1. 跨域问题的本质

• 浏览器出于安全考虑，会阻止前端页面（如 http://localhost:3000）直接访问不同源的API（如 http://localhost:8080），除非后端显式设置CORS头。
• 错误示例：

  Access-Control-Allow-Origin: *  // 后端需配置
  

2. 端口转发的解决方案

• 统一请求入口：通过代理（如Nginx）将前后端请求都转发到同一域名和端口（如 http://localhost:80），浏览器认为这是同源请求。
• 示例流程：
• 结果：浏览器不再触发CORS检查，因为所有请求的源均为 http://localhost:80。

---

二、端口转发的核心原理

1. 代理服务器的作用

• 中介角色：代理（如Nginx、Node中间件）接收客户端请求，代替客户端向真实服务器发送请求，再将响应返回给客户端。
• 关键行为：
  • 修改请求头（如隐藏原始Host）。
  • 不触发浏览器的同源策略（因为请求由代理发出，非浏览器直接发出）。

2. 常见实现方式

方案	配置示例	适用场景
Nginx反向代理	```nginx

 location /api {proxy_pass http://backend:8080;}```| 生产环境              |

| Webpack DevServer | js devServer: { proxy: { '/api': 'http://localhost:8080' } } | 前端开发环境 |
| Node中间件 | js app.use('/api', httpProxy('http://localhost:8080')); | 自定义代理逻辑 |

3. 技术细节

• 请求重写：代理会修改请求路径（如将 /api/user 转为 http://backend:8080/user）。
• 头信息传递：默认会保留原始请求头，但可手动覆盖（如强制设置 Host 头）。
• 协议转换：可统一将HTTP转为HTTPS，避免混合内容问题。

---

三、对比其他跨域解决方案

方案	优点	缺点	是否需后端配合
端口转发	对前端透明，无CORS错误	需维护代理配置	否
CORS头	标准HTTP协议支持	需后端显式设置响应头	是
JSONP	兼容老旧浏览器	仅支持GET请求	是
WebSocket	全双工通信	协议升级成本高	是

---

四、实际案例

场景：Vue项目 + Spring Boot后端

1. 开发环境（避免跨域）：

   • 前端运行在 http://localhost:3000，后端在 http://localhost:8080。
   • 在 vue.config.js 中配置：

     module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true  // 修改请求头中的Host}}}
     };
     

   • 结果：前端访问 /api/user → 代理转发到 http://localhost:8080/user，无跨域。

2. 生产环境（Nginx配置）：

   server {listen 80;server_name yourdomain.com;location / {root /var/www/frontend;  # 前端静态文件}location /api {proxy_pass http://localhost:8080;  # 后端服务proxy_set_header Host $host;}
   }
   

---

五、注意事项

1. 路径匹配：确保代理规则能正确捕获API路径（如 /api/ 与 /api 的区别）。
2. WebSocket代理：需特殊配置：

   location /ws {proxy_pass http://backend:8080;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";
   }
   

3. 性能开销：代理会增加网络跳数，高并发时需优化。

---

总结

端口转发通过代理服务器“隐藏”真实的后端地址，使浏览器认为前后端属于同源，从而绕过跨域限制。它是开发和生产环境中解决CORS问题的优雅方案，但需合理配置代理规则。