使用 Next.js 和 Headless Wordpress 作为后端的 CORS 问题

Question

我正在使用 next.js 作为我的前端框架并使用 wordpress rest api 作为我的后端来创建应用程序。要使用 WPAPI 库从 wp-rest-api 获取路由，在本地主机环境中没有任何问题，但是当我上传我的应用程序以在生产服务器（VPS 机器）上显示时，它因 CORS 错误而疯狂，我无法从后端获取任何内容，因为出现错误： error

这是 link 我的网站：frontend

我已经尝试过：在我的 wordpress 主题中添加一个 cors headers（我正在使用主题作为我的功能，但 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 内部前端
为header管理添加插件

不幸的是，没有任何效果。

这是我的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 阻止的端点的预期输出应该像这样 link: expected output

Answer 1

尝试在应用声明后添加 app.use(cors());。

这会通过 cors 模块路由所有请求，因此它可以修复您的 headers。功能可能不同于 server.use(cors());

Answer 2

看起来您的服务器（不是 wordpress）不允许 CORS - 因此请更改您的生产服务器设置 - here 是 nginx 和 appache 的示例 CORS 配置。

Answer 3

我发现哪里不对了，所以为了后代：

我的前端在 HTTP 端口 3000 上我的 Wordpress 在端口 80 上，在 HTTPS

但是我从我的前端通过 HTTP 向 wordpress 发出请求，导致重定向 frontend->wp/http->wp/https，因此，cors headers 丢失了正在处理中。

愚蠢的错误，在配置中添加了一个字母，一切正常:)

使用 Next.js 和 Headless Wordpress 作为后端的 CORS 问题

CORS problem using Next.js with Headless Wordpress as a backend

javascript

php

wordpress

next.js