端口转发与跨域处理

跨域解决方案

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），浏览器认为这是同源请求。
示例流程：
转发 /api/* 转发 / 浏览器 http://localhost:80 Nginx 后端 http://localhost:8080 前端 http://localhost:3000
结果：浏览器不再触发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后端

开发环境（避免跨域）：
- 前端运行在 http://localhost:3000，后端在 http://localhost:8080。
- 在 vue.config.js 中配置：
  js 复制代码
```
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true  // 修改请求头中的Host
            }
        }
    }
};
```
- 结果：前端访问 /api/user → 代理转发到 http://localhost:8080/user，无跨域。

生产环境（Nginx配置）：

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;
    }
}

五、注意事项

路径匹配 ：确保代理规则能正确捕获API路径（如 /api/ 与 /api 的区别）。

WebSocket代理 ：需特殊配置：

nginx 复制代码

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

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

总结

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