HTTPS访问API返回401错误但HTTP正常，Vue+Axios+Nginx项目如何解决？

问题根因与修复方案 #

以下是按优先级排列的修复步骤，操作完成后即可恢复HTTPS下的接口访问：

1. 修正NGINX核心配置错误 #

你当前的配置存在两个致命问题：一是把ssl on全局写在server块下，导致80端口也强制要求HTTPS握手；二是server_name仅匹配example.com，未覆盖你请求用到的www.example.com域名，且反向代理缺少必要的请求头传递，导致后端校验失败返回401。
修正后的完整NGINX配置如下：

server {
  listen 80 default_server;
  server_name example.com www.example.com;
  # 80端口统一跳转HTTPS，避免混合内容错误
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;
  server_name example.com www.example.com;

  ssl_certificate /usr/src/app/ssl/domain.cert.pem;
  ssl_certificate_key /usr/src/app/ssl/private.key.pem;
  # 补充SSL基础配置，避免握手失败
  ssl_protocols TLSv1.2 TLSv1.3;
  ssl_ciphers HIGH:!aNULL:!MD5;

  # vue前端静态文件配置
  location / {
    root /usr/src/app/dist;
    try_files $uri /index.html;
  }

  # Node接口反向代理配置
  location /api/ {
    # 传递原生请求头，避免后端身份校验失败
    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_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://localhost:4000/;
  }
}

修改完成后执行nginx -s reload重载配置生效。

2. 修正Axios baseURL配置 #

你不需要在baseURL中填写端口号、协议和域名，直接用相对路径即可自动匹配当前页面的协议与域名，避免跨域和证书校验问题：

export default {
  name: 'App',
  data(){
    return {
      baseApiURL: '/api',
    }
  }
}

3. 残留401问题补充排查 #

如果完成上述配置后仍返回401，检查你的Node后端服务是否配置了域名白名单，或者是否开启了Origin/Referer请求头校验，HTTP下请求直接走4000端口没有经过NGINX代理，不会触发该类校验逻辑。

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