Question 116836 in Mongodb Question posted in
The official documentation can be found here.

Mongodb – Why every Vuejs request fail in production ? error: javascript enabled

I have a vuejs app, this app call request on a rest api in nodejs (express, mongoDB atlas), when i run the vuejs app on localhost this work perfectly (the nodejs app is running on a server).

When i deploy my dist folder on the server, i see the app and the display is good, but every request return this message:

We’re sorry but Monthy replay doesn’t work properly without JavaScript
enabled. Please enable it to continue. –default-noscript-error

This message com from the noscript inside index.html (vuejs):

<noscript>
    <strong>We're sorry but Monthy replay doesn't work properly without JavaScript enabled. Please 
     enable it to continue. --default-noscript-error</strong>
</noscript>

I try to:

  • Edit the .htaccess
  • Update the baseURL inside Axios
  • Verify the proxy, and is work in local so it’s good
  • Check the api, call directly the api works fine

Now, i really don’t know what i can try .. I don’t get it why the vuejs app works but the request fail with the message from the noscript inside the index.html in vuejs.

Update, still not work:

In vue.config.js if i change the uri proxy by a dumb uri i see the same error, so something not work like i expect in production with the dist folder i thinks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The problem is like i say in the tab update on my main post, the proxy exist in development but not in production !!

    So, where you use axios.get(uri) you can integrate a full uri path like https://mydomain-api.com

    You can create a .env file in the main vuejs with a variable:

    VUE_APP_API_URI=http://localhost:8080

    And for the production create a .env.production:

    VUE_APP_API_URI=https://mydomain-api.com

    In you'r axios get just add this:

    axios.get(`${process.env.VUE_APP_API_URI}${uri}`)

    Now, the request in developement target the localhost and the proxy in vue.config.js is taken. In production (npm run build and folder dist) the .env.production is taken and call directly the url.

    You can have a cross-origin header, to fix that go on you back-end api and add cors.

    Example for Nodejs project inside app.js i do:

    // npm install cors
const cors = require('cors');
app.use(cors({
    origin: 'https://myFrontEndApp.com'
}))

  2. 0

    This occured, when you accidentally set your web directory to the /public instead of the /dist directory. After you changed the apps root to point to the /dist directory in your nginx settings it worked fine.

    server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name mydomain.com;
    root /path/to/my/website/dist;

    # other settings below...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search