AWS EC2同实例部署下Vue.js调用Node.js API时localhost失效

核心原因 #

浏览器环境里的localhost指向的是运行浏览器的本地设备（你的电脑），不是部署Node.js API的AWS EC2实例。所以当你用自己电脑的浏览器访问EC2上的Vue页面时，axios请求localhost:3000会尝试连接你本地的3000端口，自然触发ERR_CONNECTION_REFUSED错误。而EC2控制台执行curl localhost:3000是在实例内部访问，所以能正常响应。

解决方法 #

1. 用环境变量统一API地址 #

在Vue项目根目录创建对应环境的配置文件（开发用.env，生产用.env.production），设置API基础地址：

# Vite项目
VITE_API_BASE_URL=http://你的EC2公网IP:3000
# Vue CLI项目
# VUE_APP_API_BASE_URL=http://你的EC2公网IP:3000

然后在axios中引用这个变量：

import axios from 'axios'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL // Vite
  // baseURL: process.env.VUE_APP_API_BASE_URL // Vue CLI
})

打包部署后，axios会自动用EC2公网IP发起请求，避免localhost的混淆。

2. 更新Node.js的CORS配置 #

你当前只允许了http://localhost:5173，但生产环境中Vue页面的访问地址是EC2的公网IP（或域名），需要把这个地址加入白名单：

const cors = require('cors')
app.use(cors({
  origin: [
    'http://localhost:5173', // 开发环境
    'http://你的EC2公网IP:5173', // 生产环境访问地址
    'http://你的EC2公网IP' // 若Vue部署在80端口则加这个
  ],
  credentials: true // 需要携带Cookie时开启
}))

测试阶段可以临时允许所有来源（生产环境不建议）：

app.use(cors({ origin: true }))

3. 可选：用Nginx反向代理统一端口（生产环境更优雅） #

在EC2上配置Nginx，把Vue静态文件（比如80端口）和Node API（3000端口）统一到同一个公网IP下，axios用相对路径请求即可：

• Nginx配置示例：

server {
  listen 80;
  server_name 你的EC2公网IP;

  # 处理Vue静态文件
  location / {
    root /path/to/vue/dist;
    try_files $uri $uri/ /index.html;
  }

  # 反向代理Node API
  location /api {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

然后Vue里的axios配置成相对路径：

const api = axios.create({ baseURL: '/api' })

这样请求/api/categorias会被Nginx转发到localhost:3000/categorias，且同域名下无需复杂CORS配置。

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