前端切换端口，系统前后端交互就报401错误（未授权）的常见原因

🕗 发布于 2024-12-12 12:57 前端交互 java-ee

当前端切换端口后，前后端交互出现 401 未授权 错误，通常是因为以下原因：

1. 跨域问题

跨域是最常见的原因。前端端口变化会导致浏览器认为请求是跨域的，后端如果未正确配置 CORS，会拒绝请求。

原因：
- 不同端口被浏览器视为不同的“源”。
- 如果后端未设置允许跨域访问，会直接返回 401 Unauthorized。

解决方法：
在后端正确配置 CORS 头，例如：

const cors = require('cors');
app.use(cors({
  origin: ['http://localhost:8080', 'http://localhost:8081'], // 允许的前端地址
  credentials: true, // 允许发送认证信息（如 Cookie）
}));

前端请求中添加跨域支持：
如果使用 fetch 或 axios，确保设置 credentials：

fetch('http://localhost:3000/api', {
  method: 'POST',
  credentials: 'include', // 包括认证信息
});

2. Cookie 不被发送

如果 Token 或 Session ID 存储在 Cookie 中，前端切换端口后，浏览器可能不会自动发送 Cookie。

原因：
- Cookie 的默认作用域绑定到特定的域名和端口。
- Cookie 的 SameSite 属性可能限制跨域发送。

解决方法：
后端设置 Cookie 时，确保正确配置：

res.cookie('token', token, {
  httpOnly: true,
  secure: false, // 如果不是 HTTPS，设置为 false
  sameSite: 'None', // 允许跨域发送
});

3. 前端接口地址错误

切换端口后，前端代码可能没有正确指向后端接口。

原因：
- 前端和后端接口地址不匹配。
- 硬编码的后端地址仍然指向旧的端口。
解决方法：
- 确保前端配置正确指向后端服务。
- 使用环境变量动态配置后端地址：
```
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3000';
```

4. 后端对请求来源的校验

有些后端会检查请求的 Origin 或 Referer，确保只允许来自特定来源的请求。端口变化可能导致这些校验失败。

原因：
- 后端只允许 http://localhost:8080，切换到 8081 后被拒绝。

解决方法：
修改后端的来源校验逻辑，添加新的端口到白名单：

const allowedOrigins = ['http://localhost:8080', 'http://localhost:8081'];
if (!allowedOrigins.includes(req.headers.origin)) {
  return res.status(401).send('Unauthorized');
}

5. Token 绑定策略

后端生成或验证 Token 时，可能绑定了额外的上下文信息（如端口、IP 地址、用户代理等）。端口变化可能导致 Token 校验失败。

原因：
- Token 在生成时绑定了 Origin 或 Host，切换端口导致验证失败。
解决方法：
- 确保后端生成 Token 时不绑定端口等敏感信息。
- 修改后端 Token 验证逻辑，适应多端口来源。

6. 开发环境代理配置问题

如果前端通过 Webpack 等工具的代理服务器转发请求，切换端口后，代理配置可能不匹配，导致请求未能正确转发到后端。

原因：
- Webpack 的 proxy 配置未包含新端口。
- 或者代理配置未生效。

解决方法：
修改 Webpack 配置文件，确保代理正确设置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};

7. 缓存问题

浏览器可能缓存了旧端口的请求信息或错误响应。

原因：
- 浏览器缓存了 401 错误或旧的跨域配置。
解决方法：
- 清除浏览器缓存。
- 强制刷新页面（Ctrl + Shift + R）。

8. Session 失效或不一致

如果后端通过 Session 验证用户身份，切换端口可能导致 Session 不一致。

原因：
- Session ID 存储在 Cookie 中，切换端口后 Cookie 不再发送。
- 或者前后端 Session 存储不一致。
解决方法：
- 确保 Session Cookie 设置支持跨域：
```
app.use(session({
  cookie: { sameSite: 'None', secure: false },
}));
```
- 检查后端是否正确验证 Session ID。

9. CSRF 防护机制

某些后端启用了 CSRF 防护，端口变化可能被认为是跨域请求，导致防护机制拒绝请求。

原因：
- CSRF Token 校验失败，后端返回 401 Unauthorized。
解决方法：
- 确保前端发送正确的 CSRF Token。
- 如果是开发环境，可以临时关闭 CSRF 防护。

综合调试步骤

检查跨域问题：
- 确认后端是否正确配置了 CORS。
- 检查前端请求是否携带 Origin 和认证信息。
检查 Cookie 或 Token：
- 是否正确发送了认证信息。
- 后端是否校验了不匹配的 Origin。
查看后端日志：
- 确认 401 错误的具体原因（如来源校验失败或 Token 校验失败）。
排除开发环境配置问题：
- 检查 Webpack 代理或本地开发环境设置。

通过以上步骤可以定位和解决 401 错误问题。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------当前端从 8080 换到 8081 后，出现 401 错误 而无法生成 Token，可能是由于以下原因：

1. 跨域问题

原因: 换端口后，浏览器视为不同的源，跨域访问后端时，若后端未正确设置 CORS，则会报 401 Unauthorized。
验证方式:
- 检查后端是否返回了跨域错误。
- 在浏览器开发者工具 Network 面板，查看请求是否包含正确的跨域头。

解决方法:

在后端允许新端口的跨域访问。例如，使用 Express：

const cors = require('cors');
app.use(cors({
  origin: ['http://localhost:8080', 'http://localhost:8081'], // 允许的端口
  credentials: true, // 允许发送 Cookie
}));

如果请求需要带上 Cookie，确保前端在请求中添加 credentials：

fetch('http://localhost:3000/api', {
  method: 'POST',
  credentials: 'include', // 确保发送 Cookie
});

2. Token 存储与验证绑定

原因:
- 如果后端通过 Cookie 传递 Token，而 Cookie 默认只绑定到特定的域和端口，换端口后，浏览器不会发送旧的 Cookie。
- 或者后端验证 Token 时，对请求的 Origin 或 Referer 进行了限制，新端口不被认可。

验证方式:

检查后端是否有类似的验证逻辑：

if (!allowedOrigins.includes(req.headers.origin)) {
  return res.status(401).send('Unauthorized');
}

解决方法:

修改 Cookie 的设置，允许跨域：

res.cookie('token', token, {
  httpOnly: true,
  secure: false,        // 如果在开发环境，设为 false
  sameSite: 'None',     // 允许跨域
});

检查后端是否对 Origin 有限制，添加新端口的白名单。

3. 前端与后端接口地址不匹配

原因:
- 前端可能未正确指向后端接口地址。
- 如果后端接口是绑定到 http://localhost:8080，但前端尝试从 8081 访问，后端可能会拒绝请求。

验证方式:

检查前端代码中后端地址是否正确。
检查后端日志是否记录了请求。

解决方法:

使用环境变量动态设置 API 地址，避免硬编码：

const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3000';

4. 后端对端口依赖的逻辑

原因:
- 后端可能对生成或验证 Token 的逻辑依赖于特定的端口。
- 例如，通过 req.headers.origin 或 req.headers.host 检查来源。

验证方式:

查看后端代码，检查 Token 生成逻辑是否绑定到端口或域名。

解决方法:

修改后端逻辑，去掉对端口的硬绑定。例如：

if (!req.headers.origin.startsWith('http://localhost')) {
  return res.status(401).send('Unauthorized');
}

5. 浏览器缓存问题

原因:
- 浏览器可能缓存了旧端口的请求结果（包括 401 响应）。
- 换端口后，缓存的错误响应可能影响请求。

验证方式:

打开浏览器开发者工具，清除缓存后重试。

解决方法:

强制刷新页面或清除浏览器缓存。

6. 开发环境配置冲突

原因:
- 如果前端使用 Webpack 开发服务器（如 webpack-dev-server），它可能需要额外的跨域代理配置。
- 没有正确配置时，可能导致请求失败。

解决方法:

在 webpack.config.js 中添加代理：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000', // 后端地址
      changeOrigin: true,             // 避免跨域问题
    },
  },
},

综合调试步骤

检查 CORS 配置: 后端是否允许从 8081 访问。
检查 Cookie 设置: 确保 SameSite 和 Secure 参数配置正确。
确认请求地址: 确保前端代码请求的是正确的后端地址。
查看后端日志: 确认是否因为 Origin 或其他校验导致请求被拒绝。
排查开发环境代理: 确保 Webpack 或其他开发工具的代理配置正确。

通过这些步骤，可以定位和解决换端口后报 401 的问题。

原文地址：https://blog.csdn.net/m0_55049655/article/details/144409913

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：xss原理分析与剖析
下一篇：nestjs+webpack打包成一个mainjs

金蝶云星空与华为云AX无缝数据集成技术详解
定时抓取金蝶云星空接口数据：通过定时任务可靠地抓取金蝶云星空中的业务数据。自定义数据转换逻辑：根据业务需求，对抓取的数据进行必要的转换，以适应目标平台的数据结构。批量写入到华为云AX：利用高吞吐量的数
阅读更多2024-12-12
【密码学】SM4算法
sm4算法笔记
阅读更多2024-12-12
AI 名人堂：Ian J. Goodfellow 生成对抗网络之父
Ian Goodfellow 在斯坦福大学接受了计算机科学的教育，并在Andrew Ng的指导下完成了学士和硕士学位。随后，他在蒙特勒大学继续深造，师从Yoshua Bengio和Aaron Cour
阅读更多2024-12-12
OpenCV相机标定与3D重建(16)将点从齐次坐标转换为非齐次坐标函数convertPointsFromHomogeneous()的使用
cv::convertPointsFromHomogeneous 是 OpenCV 库中的一个函数，用于将点从齐次坐标（homogeneous coordinates）转换为非齐次坐标（Euclide
阅读更多2024-12-12
Onnxruntime推理Yolov8-seg
【代码】Onnxruntime推理Yolov8-seg。
阅读更多2024-12-12
Android 车载虚拟化底层技术-Kernel 5.10 -Android12(multi-cards)技术实现
对于Linux和Android来说，只要是多屏(>=2)显示的场景都可以显示虚拟化。只是大部分场景对显示稳定性没有要求，系统异常了就都不显示了。但对于容器相关方案，或要求显示隔离的场景，是需要进
阅读更多2024-12-12
ruoyi-vue退出登录配置域名后无法退出登录问题的解决
ruoyi-vue项目前端调用/logout执行退出登录逻辑，线上部署使用nginx转发后，提示405 not allow。#ip:8088换成自己服务器ip和端口号。# 确保其他配置正确处理 POS
阅读更多2024-12-12
某政府大楼沉降自动化监测
岩创可视化云平台观查数据，根据设置报警值，数据变化达到预警值时通过短信、电话等方式及时通知，提供有效预警，使得相关人员可以更加精准地掌握老旧房屋变化情况，构建一个全面的安全监测体系，以确保相关人员的人
阅读更多2024-12-12
Android12 设置无home属性的apk为launcher
设置无home属性的apk为launcher。
阅读更多2024-12-12
apisix lua插件开发记录
经过插件的请求的各拦截点见官方文档：https://apisix.apache.org/docs/apisix/architecture-design/apisix/需要重启apisix容器，但脚本都
阅读更多2024-12-12

前端切换端口，系统前后端交互就报401错误（未授权）的常见原因

1. 跨域问题

2. Cookie 不被发送

3. 前端接口地址错误

4. 后端对请求来源的校验

5. Token 绑定策略

6. 开发环境代理配置问题

7. 缓存问题

8. Session 失效或不一致

9. CSRF 防护机制

综合调试步骤

1. 跨域问题

2. Token 存储与验证绑定

3. 前端与后端接口地址不匹配

4. 后端对端口依赖的逻辑

5. 浏览器缓存问题

6. 开发环境配置冲突

综合调试步骤

相关文章