How to fix Vue.js error 405 Not Allowed in production mode used with Nginx + Symfony + Axios?

Good morning everyone,

I have an issue and it’s been a month now (seriously) I try to fix it. Here it is:
My stack is Symfony Nginx Vue.js.

My project structure :
enter image description here

The api folder is the API code in PHP/Symfony4.4
The back folder is the admin panel in Vue.JS

Both of them are (git) submodules.

My concern is on the Vuejs session. To access the app, we need to log in. In dev mode, everything works fine but not in production mode!
Actually, when I submit the form; I have a 405 Not Allowed error

I have no idea on what is happening. So here are my project confs.

  1. docker-compose.yml

    api:
        container_name: svisor-api
        build:
            context: ./api
        env_file:
            - ./api/.env
        depends_on:
            - db
        restart: always
        volumes:
            - ./api:/var/www/api:rw
            # - /var/www/html/vendor

    nginx:
        container_name: svisor-nginx
        image: nginx:stable-alpine
        depends_on:
            - api
            - website
            - back
        volumes:
            - ./website:/var/www/html:rw
            - ./api:/var/www/api:rw
            - ./nginx.default.conf:/etc/nginx/conf.d/default.conf
            - ./logs/nginx:/var/log/nginx
        restart: always
        ports:
            - "80:80"

    back:
        container_name: svisor-back
        build:
            context: ./back
        restart: always
  1. back Dockerfile

Based on the official doc, I did this

FROM node:lts-alpine as build-stage
 
RUN echo "================   BUILDING BACK   =================="
RUN apk add npm
 
WORKDIR /app 
COPY package*.json ./ 
COPY ./ . 
RUN npm install 
RUN npm run build

FROM nginx:stable-alpine as production-stage 
RUN mkdir -p /app 
COPY --from=build-stage /app /app COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
  1. back Nginx conf
    Also based on th vuejs official doc,
server {
    listen 80 default_server;
    server_name  localhost;
    root   /app/dist;
    index  index.html;

    location / {
      try_files $uri $uri/ /index.html;
      add_header 'Access-Control-Allow-Origin' '*';
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
}
  1. the vue conf
//file vue.config.js
module.exports = {
    devServer: {
        proxy: process.env.VUE_APP_API_URL,
    }
}

My env vars are :
enter image description here

And the login code :

    actions: {
        login({commit}, credentials) {

            console.log(process.env.VUE_APP_URL);
            console.log(process.env.VUE_APP_API_URL);

            return axios
                .post(process.env.VUE_APP_URL + '/login_check', credentials)
                .then(({data}) => {
                    commit('SET_LOGGED_USER', data)
                })
        },
    }

(The console.log confirm me if I’m in dev or prod env).

  1. The global Nginx conf
### API server
server {
    listen 80;
    server_name api.svisor.localhost;
    root /var/www/api/public;
    access_log /var/log/nginx/api.access_log;
    error_log /var/log/nginx/api.error_log;

   location / {
        # try to serve file directly, fallback to app.php
        try_files $uri /index.php$is_args$args;
        add_header 'Access-Control-Allow-Origin' '*';
    }

    location ~ ^/index.php(/|$) {
        fastcgi_pass api:9000;
        fastcgi_split_path_info ^(.+.php)(/.*)$;
        include fastcgi_params;
        add_header 'Access-Control-Allow-Origin' '*';
       fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
       fastcgi_param DOCUMENT_ROOT $document_root;
       internal;
   }

   location ~ .php$ {
     return 404;
   }
}

### Back server
server {
    listen 80;
    server_name back.svisor.localhost;
    access_log /var/log/nginx/back.access_log;
    error_log /var/log/nginx/back.error_log;

    location / {
      proxy_pass http://back;
    }

    error_page   400 402 403 404  /40x.html;
    location = /40x.html {
      root   /usr/share/nginx/html;
    }
}

Visual error

In dev mode, it is ok
enter image description here

But in prod mode,
enter image description here

The error in detail :
enter image description here
enter image description here

  1. some API router show
    We can see the route (/login_check) I’ve been calling exists and is POST method.
    enter image description here

What Have I already done ?

I am pretty sure I have read 80% of google results (from page 1 to 10); I have search in github issues of every project.
And it’s always the same thing : CORS (Access-Control-Allow-Origin/Methods). I tried all that but nothing works. I even tried things I don’t even remember (from 50x error to craziest ones). Some asking to implement an OPTIONS call but I don’t know how.
Looking at how many tickets there are on this topic in Laravel forum, it is obviously a big problem.
Some CORS source I read :
Mozilla Cross-Origin Resource Sharing (CORS)
Cross-Origin Resource Sharing (CORS)

Sorry for all the text and I hope I gave enough data so that you can help me fix this.

Thank you in advance.

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *