Как вы можете обрабатывать запросы (CORS) в Next.js при отправке запросов API в другой домен?

Поиск

Для обработки запросов CORS (Cross-Origin Resource Sharing) в Next.js при отправке запросов API на другой домен, можно использовать несколько подходов:

Настройка сервера или API endpoint

На сервере или API endpoint, который получает ваши запросы, необходимо настроить заголовки CORS, чтобы разрешить запросы с домена вашего Next.js приложения. Например, если вы используете Express.js, вы можете добавить middleware для обработки CORS:

const express = require('express');
const cors = require('cors');
const app = express();
 
app.use(cors({
  origin: 'https://your-nextjs-app-domain.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Использование serverless функций в Next.js как прокси

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

Создайте файл pages/api/proxy.js:

export default async function handler(req, res) {
  const { method, body } = req;
  const url = 'https://external-api-domain.com/endpoint';
 
  const response = await fetch(url, {
    method,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': req.headers.authorization || ''
    },
    body: method === 'POST' || method === 'PUT' ? JSON.stringify(body) : undefined
  });
 
  const data = await response.json();
 
  res.status(response.status).json(data);
}

Теперь вы можете отправлять запросы к /api/proxy вместо прямого обращения к внешнему API:

fetch('/api/proxy', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Использование библиотеки next-connect для обработки CORS

Вы можете использовать библиотеку next-connect для более удобной обработки CORS в ваших API маршрутах:

Установите библиотеку:

npm install next-connect

Создайте файл pages/api/example.js:

import nextConnect from 'next-connect';
import cors from 'cors';
 
const handler = nextConnect()
  .use(cors({
    origin: 'https://your-nextjs-app-domain.com',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type', 'Authorization']
  }))
  .get((req, res) => {
    res.json({ message: 'GET request successful' });
  })
  .post((req, res) => {
    res.json({ message: 'POST request successful' });
  });
 
export default handler;

Теперь вы можете отправлять запросы к /api/example с правильными заголовками CORS.

Эти методы помогут вам эффективно обрабатывать запросы CORS в вашем Next.js приложении.