Question

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

这是指向我的网站的链接：frontend

我已经尝试过：在wordpress主题内添加一个cors标头（我将主题用作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
);

在前端的我的server.js中添加一个cors库
添加用于标题管理的插件

不幸的是，什么都没有。

这是我的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

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

这将通过cors模块路由所有请求，以便它可以修复标头。功能可能与server.use（cors（））;

不同

Answer 2

我发现了问题所在，所以对于后代：

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

但是我是从前端请求通过HTTP进行wordpress的，这导致重定向frontend-> wp / http-> wp / https，因此，cors标头在此过程中丢失了。

愚蠢的错误，在配置中添加了一个字母，并且一切正常：）

Answer 3

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

使用无头Wordpress作为后端的Next.js的CORS问题

3 个答案: