Why every Vuejs request fail in production ? error: javascript enabled-CodePudding

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.

CodePudding user response：

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...
}

CodePudding user response：

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'
}))