Я создаю приложение, используя 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);
});
Ожидаемый вывод от конечной точки, что блокированные сердечники должны быть похожи на эту ссылку:
ожидаемый результат