javascript - 使用 Next.js 和 Headless Wordpress 作为后端时出现 CORS 问题

Question

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

这是我网站的链接:frontend

我已经尝试过:在我的 WordPress 主题中添加 cors header (我使用主题作为 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);
  });

被阻止的端点的预期输出应如下链接所示: expected output

Answer 1

我发现了问题所在，所以为了后代:

我的前端位于端口 3000、HTTP 上我的 WordPress 位于端口 80、HTTPS

但是我从前端通过 HTTP 向 WordPress 发出请求，这导致重定向前端->wp/http->wp/https，因此，cors header 在此过程中丢失。

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