Вопрос:

CORS проблема с использованием Next.js с Headless Wordpress в качестве бэкэнда

javascript php wordpress cors next.js

57 просмотра

3 ответа

11 Репутация автора

Я создаю приложение, используя next.js в качестве моей основы и WordPress Rest API в качестве моего бэкэнда. Извлекать маршруты из wp-rest-api im с помощью библиотеки WPAPI, и в среде localhost проблем не возникало, но когда я загрузил свое приложение, чтобы показать его на производственном сервере (VPS-машине), оно сошло с ума с ошибками CORS, я могу ' не могу получить ничего из моего бэкэнда, так как я получаю сообщение об ошибке: ошибка

Вот ссылка на мой сайт: фронтенд

Я уже пробовал: добавление заголовков cors в моей теме WordPress (я использую тему, как мои функции, которых еще нет в REST API)

Вот код в functions.php:

add_action(
    'rest_api_init',
    function () {
        remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );

        add_filter(
            'rest_pre_serve_request',
            function ( $value ) {
                header( 'Access-Control-Allow-Origin: *' );
                header( 'Access-Control-Allow-Methods: GET,PUT,POST,DELETE,PATCH,OPTIONS' );
                header( 'Access-Control-Allow-Credentials: true' );
                header( 'Access-Control-Allow-Headers: Access-Control-Allow-Headers, Authorization, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers' );
                return $value;
            }
        );
    },
    15
);
  • Добавление библиотеки cors в мой server.js внутри внешнего интерфейса
  • Добавление плагина для управления заголовками

К сожалению, ничего не получалось.

Вот мой server.js


const express = require('express');
const next = require('next');
const cors = require('cors')

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();


app
  .prepare()
  .then(() => {
    const server = express();

    server.use(cors());

    server.options('*', cors())

    server.get("/blog", (req, res) => {
      app.render(req, res, "/blog/list");
    });

    server.get("/forum", (req, res) => {
      app.render(req, res, "/forum/list");
    });

    server.get("/:pageSlug", (req, res) => {
      const queryParams = { slug: req.params.pageSlug };
      app.render(req, res, "/page", queryParams);
    });

    server.get("/user/:action", (req, res) => {
      const queryParams = { action: req.params.action };
      app.render(req, res, "/user", queryParams);
    });

    server.get("/blog/:slug", (req, res) => {
      const queryParams = { slug: req.params.slug };
      app.render(req, res, "/blog/post", queryParams);
    });

    server.get("/forum/:id/:slug", (req, res) => {
      const queryParams = { slug: req.params.slug, id: req.params.id };
      app.render(req, res, "/forum/post", queryParams);
    });

    server.get("/:category/:postSlug", (req, res) => {
      const queryParams = { category: req.params.category, slug: req.params.postSlug };
      app.render(req, res, "/post", queryParams);
    });

    server.get('*', (req, res) => {
      return handle(req, res);
    });

    server.listen(3000, err => {
      if (err) throw err;
      console.log('> Ready on http://localhost:3000');
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

Ожидаемый результат от конечной точки, что блокированные cors должны быть как в этой ссылке: ожидаемый результат

Автор: Kizbo Источник Размещён: 11.06.2019 11:05

Ответы (3)


1 плюс

66 Репутация автора

Попробуйте добавить app.use(cors());после объявления приложения.

Это направляет все запросы через модуль cors, чтобы он мог исправить ваши заголовки. Может функционировать иначе, чем server.use (cors ());

Автор: Mikolaj Figurski Размещён: 11.06.2019 11:24

-1 плюса

17091 Репутация автора

Похоже, что ваш сервер (не WordPress) не поддерживает CORS - поэтому измените настройки рабочего сервера - вот пример конфигурации CORS для nginx и appache.

Автор: Kamil Kiełczewski Размещён: 12.06.2019 03:56

0 плюса

11 Репутация автора

Я узнал, что было не так, поэтому для будущих поколений

Мой веб-интерфейс был на порту 3000, на HTTP Мой Wordpress был на порту 80, на HTTPS

Но я делал запрос на WordPress через HTTP от моего веб-интерфейса, что вызвало перенаправление frontend-> wp / http-> wp / https и из-за этого заголовки cors были потеряны в процессе.

Глупая ошибка, добавлена ​​одна буква в конфигурации и все работает как надо :)

Автор: Kizbo Размещён: 12.06.2019 06:11
Вопросы из категории :
32x32