We're sorry but sf doesn't work properly without JavaScript enabled. Please enable it to continue

Viewed 146

I have a Vuejs app that makes an Axios call. I Dockerized it and used digitalocean to serve it to the cloud. App is working but after any axios call, i am getting "We're sorry but sf doesn't work properly without JavaScript enabled. Please enable it to continue." as response. -I have tried changing the port from 8080 to 8081, running the app on incognito browser tab, changing "baseUrl" with "baseURL" and in front-end docker file i was installing libraries with npm, i also tried to use yarn but i still have this issue.

Is there any more idea about how to fix it ?

enter image description here

main.js file

    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");

Frontend Docker file ;

#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
# Build the project
RUN npm run build

# Expose a port
EXPOSE 3000

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

Backend docker file

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 file ;

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,
  },
});
1 Answers

Your backend requests are being handled by the frontend app. It looks like you are relying on the development server's proxy functionality in order to forward them to the backend, but this will (and should) not be active when you deploy your app. Instead you will need another proxy that sends /api requests to your backend and other requests to your frontend.

Related