Нет заголовка ‘Access-Control-Allow-Origin’ для запрашиваемого ресурса NextJS на Vercel [закрыто]

Вопрос или проблема

{
    "rewrites": [
      {
        "source": "/(.*)",
        "destination": "https://us-central1-blog-themarshalls.cloudfunctions.net/app/:path*"
      }
    ]
  }

export default {
  async headers() {
      return [
          {
              // Применить заголовки ко всем маршрутам
              source: '/(.*)',
              headers: [
                  {
                      key: 'Access-Control-Allow-Credentials',
                      value: 'true',
                  },
                  {
                      key: 'Access-Control-Allow-Origin',
                      value: '*',
                  },
                  {
                      key: 'Access-Control-Allow-Methods',
                      value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
                  },
                  {
                      key: 'Access-Control-Allow-Headers',
                      value:
'X-CSRF-Token, X-Requested-With, Accept, Accept- Version, Content - Length, Content - MD5, Content - Type, Date, X - Api - Version',
                  },
              ],
          },
      ];
  },
};

Ответ или решение

Чтобы решить проблему с CORS (Cross-Origin Resource Sharing) в вашем приложении на Next.js, размещенном на Vercel, необходимо правильно настроить серверную часть (в данном случае, Firebase Functions) и убедиться, что соответствующие заголовки CORS добавлены к ответам. Давайте разберем основные шаги, которые помогут решить вашу проблему.

1. Настройка Firebase Functions

Убедитесь, что ваша функция Firebase правильно обрабатывает CORS. Для этого необходимо добавить соответствующие заголовки в ответе. Если вы используете модуль cors, настройте его следующим образом:

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');

const app = express();

// Настройка CORS
app.use(cors({
    origin: 'https://myblog.vercel.app', // Укажите ваш домен
    methods: ['GET', 'POST', 'OPTIONS'], // Укажите методы, которые вы используете
}));

// Ваши маршруты
app.get('/posts', (req, res) => {
    // Логика получения постов
    res.json({ posts: [] });
});

exports.app = functions.https.onRequest(app);

2. Проверка конфигурации на Vercel

В файле vercel.json у вас все правильно настроено для переадресации запросов к Firebase Functions. Убедитесь, что файл имеет следующий вид:

{
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "https://us-central1-blog-themarshalls.cloudfunctions.net/app/:path*"
        }
    ]
}

3. Проверка next.config.mjs

Ваш файл next.config.mjs также нуждается в оптимизации, так как он не будет достаточно хорош для решения проблемы с CORS, когда запрос идет к стороннему серверу (в данном случае, к Firebase Functions). Заголовки, которые вы добавили, управляют CORS только для запросов, отправляемых от вашего приложения.

В большинстве случаев, вам нужно будет настроить CORS на уровне серверной функции (как указано в пункте 1), а не в конфигурации Next.js. Тем не менее, вот пример правильной настройки:

export default {
    async headers() {
        return [
            {
                // Применяем заголовки ко всем маршрутам
                source: '/(.*)',
                headers: [
                    {
                        key: 'Access-Control-Allow-Credentials',
                        value: 'true',
                    },
                    {
                        key: 'Access-Control-Allow-Origin',
                        value: 'https://myblog.vercel.app', // укажите здесь ваш домен
                    },
                    {
                        key: 'Access-Control-Allow-Methods',
                        value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
                    },
                    {
                        key: 'Access-Control-Allow-Headers',
                        value: 'X-CSRF-Token, X-Requested-With, Accept, Content-Type',
                    },
                ],
            },
        ];
    },
};

4. Проверка

После внесения изменений выполните следующие действия:

1. Разверните функции Firebase с обновленной логикой CORS.
2. Разверните или обновите ваше приложение на Vercel.
3. Попробуйте еще раз сделать запрос к своему бэкенду из фронтенда.

Заключение

Если все настройки выполнены правильно и проблема продолжается, проверьте консоль браузера на наличие дополнительных ошибок или сообщений. Если вы увидите, что заголовки CORS не передаются, это может указывать на проблемы с конфигурацией сервера.

Если у вас остались вопросы или нужна дополнительная помощь, пожалуйста, напишите.