通过PuTTY建立SSH隧道后React前端登录功能无法正常使用

这个问题我之前帮人排查过，大概率和跨域配置有关，但得先理清楚具体情况，一步步来：

先搞清楚登录请求的目标地址 #

首先打开Chrome开发者工具（按F12），切换到Network标签页，尝试点击登录按钮，看看登录请求的URL是什么：

• 如果请求的是类似 http://your-remote-server-ip:xxx/api/login 这种直接指向远程服务器的地址：那肯定是跨域问题——因为当前页面的域名是localhost:8080，和远程API的域名/端口不一样，浏览器的同源策略会拦截这个跨域请求。
• 如果请求的是相对路径/api/login（实际发送到localhost:8080/api/login）：那跨域不是问题，得去排查其他原因，比如API服务的端口有没有被隧道转发、登录接口本身是否有验证逻辑问题。

跨域问题的两种解决办法 #

如果确认是跨域导致的，有两个常用方案：

方案一：给React项目配置代理（推荐） #

在你的React项目根目录的package.json里添加proxy字段，直接指向远程API的地址：

{
  "name": "your-react-app",
  "proxy": "http://your-remote-server-ip:api-port",
  // 其他原有配置...
}

配置完重启React开发服务器，之后你前端用相对路径发起登录请求（比如fetch('/api/login')），React会自动把请求转发到远程API。这时候浏览器看到的请求都是同域的（localhost:3000或者你本地开发的端口），不会触发跨域限制。

方案二：在远程API服务中开启CORS #

如果没法修改前端配置，那就得在远程的后端API服务里配置跨域允许：

• 比如用Node.js/Express的话，可以用cors中间件：

const cors = require('cors');
const express = require('express');
const app = express();

// 允许localhost:8080的跨域请求，如果登录需要带Cookie的话，credentials必须设为true
app.use(cors({
  origin: 'http://localhost:8080',
  credentials: true
}));

其他后端语言（Python/Java/Go等）也有对应的CORS配置方式，核心都是在响应头里加上Access-Control-Allow-Origin: http://localhost:8080这类字段。

非跨域情况的排查点 #

如果确认不是跨域问题，再检查这几个地方：

• SSH隧道是不是只映射了前端UI的端口，没映射API服务的端口？比如你可能只把远程前端的3000端口映射到本地8080，但API在远程的5000端口，这时候请求localhost:8080/api/login根本到不了远程API，得修改PuTTY的隧道配置，把远程API的端口也映射到本地（比如本地8081映射到远程5000，然后前端请求http://localhost:8081/api/login）。
• 远程API有没有IP白名单限制？有些服务器会限制只有特定IP能访问API，隧道转发的请求源IP可能不在允许范围内，得检查API的访问控制规则。
• 前端登录请求的格式对不对？比如请求头、参数有没有符合API的要求，看看Network里的请求详情（Request Headers、Payload）和响应信息（状态码、响应体），有没有报错提示。

内容的提问来源于stack exchange，提问作者learning_vba