Vue+Axios容器化部署后请求返回JS启用提示问题求助

我有一个基于Vue.js的应用，通过Axios发起请求，已完成Docker化并部署在DigitalOcean云端。应用可正常运行，但所有Axios请求都会返回**"We're sorry but sf doesn't work properly without JavaScript enabled. Please enable it to continue."**的提示。

已尝试但无效的方案：

• 更换端口（从8080改为8081）
• 使用隐身浏览器标签页
• 将Axios的baseUrl改为baseURL
• 在前端Dockerfile中切换npm/yarn安装依赖

提供的代码文件 #

main.js 文件 #

createApp(App)
  .use(store)
  .use(vue3GoogleLogin, {
    clientId:
      "******",
  })
  .component("font-awesome-icon", FontAwesomeIcon)
  .component("MazBtn", MazBtn)
  .component("MazInput", MazInput)
  .component("MazPhoneNumberInput", MazPhoneNumberInput)
  .component("Datepicker", Datepicker)
  // .component("VueGlide", VueGlide)
  .use(router)
  .mount("#app");

前端Dockerfile #

#Base image
FROM node:lts-alpine

#Install serve package
RUN npm i -g serve

# Set the working directory
WORKDIR /app

# Copy the package.json and package-lock.json
COPY package*.json ./

# install project dependencies
RUN npm install

# Copy the project files
COPY . .

# Build the project
RUN npm run build

# Expose a port
EXPOSE 3000

# Executables
CMD [ "serve", "-s", "dist" ]

后端Dockerfile #

FROM python:3.10-bullseye

# Working directory
WORKDIR /app

# Copy the dependencies
COPY ./docs/requirements.txt /app

# Install the dependencies
RUN pip3 install -r requirements.txt

# Copy the files
COPY . .
WORKDIR /app/backend

ENV FLASK_APP=app.py
# Executable commands
CMD [ "python3", "-m" , "flask", "run", "--host=0.0.0.0"]

vue.config.js 文件 #

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,

  devServer: {
    compress: true,
    host: "127.0.0.1",
    proxy: {
      // "/upload/img": {
      //   // target: "http://127.0.0.1:9000",
      //   target: "http://127.0.0.1:5000",
      // },

      "/api": {
        // target: "http://127.0.0.1:9000",
        target: "http://127.0.0.1:5000",
      },
      "/media": {
        target: "http://localhost:8000",
      },
      "/http-bind": {
        target: "https://localhost:8443",
        logLevel: "debug",
      },
    },
    // https: true,
    // watchContentBase: false,
  },
});

修复思路 #

• 配置生产环境Axios的baseURL：vue.config.js中的devServer代理仅在本地开发时生效，Docker部署的生产环境需要单独给Axios设置正确的后端地址。比如在Axios实例中指定baseURL: 'http://后端服务地址:5000/api'，或者根据Docker网络配置用服务名访问（如http://backend:5000/api）。
• 验证Docker网络连通性：确保前后端容器处于同一Docker网络，前端容器能通过服务名/IP访问到后端。如果是单独部署容器，要确认后端端口已正确映射，且前端能访问到后端的公网地址。
• 检查反向代理配置（若有）：如果用Nginx等反向代理托管前端，要配置路由规则，把/api等请求转发到后端，而不是返回Vue的静态页面（当前错误提示是Vue的默认404页面，说明请求被前端服务器接管，没转发到后端）。
• 查看请求实际路径：在浏览器开发者工具的Network面板里，检查Axios请求的URL是否正确，确认请求是发送到后端还是前端的无效路由。
• 测试后端服务可用性：直接通过curl或浏览器访问后端API接口（如http://后端IP:5000/api/xxx），验证后端是否能正常返回数据，排除后端自身故障。
• 确认生产环境变量：如果项目用环境变量配置API地址，要确保Docker构建或运行时注入了正确的生产环境变量，避免使用开发环境的本地地址。

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