Почему прокси-сервер Nuxtjs Axios не работает на сервере?

#laravel #nginx #proxy #axios #nuxt.js

Вопрос:

Я несколько дней пытаюсь найти решение. Похоже, что моя конфигурация прокси-сервера nuxt/axios не учитывается, когда мой сайт находится в рабочем состоянии. Локально все работает нормально, но как только сайт находится на сервере, мои вызовы ajax попадают mysite.com/api/ect... вместо того, чтобы быть прокси mysite.com/api/v1/ect -сервером . Я пытался играть с axios.baseUrl и различными конфигурациями, но, похоже, ничего не работает.

 axios: {
    proxy: true,
    credentials: true,
},

proxy: {
    '/api/': { target: 'mysite.com/api/v1', pathRewrite: {'^/api/': ''} },
},
 

Может быть, проблема связана с моей конфигурацией Nginx ? Я использую обратный прокси — сервер для обслуживания приложения nuxt на mysite.com и api laravel на mysite.com/api. Может ли это быть проблемой ?

 # FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/mysite.com/before/*;

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name mysite.com;
    server_tokens off;
    root /home/forge/api/public;

    # FORGE SSL (DO NOT REMOVE!)
    ssl_certificate /etc/nginx/ssl/....
    ssl_certificate_key /etc/nginx/ssl/....

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers .....
    ssl_prefer_server_ciphers off;
    ssl_dhparam /etc/nginx/dhparams.pem;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    # FORGE CONFIG (DO NOT REMOVE!)
    include forge-conf/mysite.com/server/*;

    location /api {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/mysite.com-error.log error;

    error_page 404 /index.php;

    location ~ .php$ {
        fastcgi_split_path_info ^(. .php)(/. )$;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
    }
    
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location ~ /.(?!well-known).* {
        deny all;
    }
}

# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/mysite.com/after/*;
 

Спасибо за вашу помощь и рекомендации,

Комментарии:

1. конфигурация axios.прокси-это Node.js только. это бессмысленно в браузерах.

2. Спасибо за ваш ответ, но как мне тогда действовать ? Вот документ NuxtJS об этом: axios.nuxtjs.org/options#proxy . Как объяснено на местном уровне, это работает идеально. Только когда я размещаю сайт в прямом эфире, URL-адрес не является прокси-сервером axios

3. Вы поставили env variables его на рабочий сервер?

4. Да. Заданы значения API_URL и BASE_URL. Но даже жесткое кодирование URL в коде не работает.

Ответ №1:

  1. Не используйте API_URL, если вы используете режим прокси. Используйте prefix вместо этого.
  2. Включите отладку для проверки запроса прокси:

свойство прокси в nuxt.config.js:

 proxy: {
     
// target, others options

     logLevel: ‘debug’,

     onProxyReq(proxyReq, req, res) {

       // console.log here

     }
}