在 server.js (Express/NextJS) 中获取 301 重定向数据答案

【问题标题】：Fetching 301 Redirect Data In server.js (Express/NextJS)在 server.js (Express/NextJS) 中获取 301 重定向数据
【发布时间】：2019-03-04 15:32:49
【问题描述】：

我正在使用 express 和 next js 开发一个项目，我发现了一个很好的示例，说明如何在 server.js 文件中为重定向设置数据数组。但是，如果可能的话，我想在 WordPress 中构建一个插件，允许用户提交重定向数据，以便可以由没有技术知识的人管理。我的问题是，是否可以在我的 server.js 文件中获取数据来替换此示例中的数据？

const express = require('express')
const next = require('next')
const { join } = require('path')

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

//This is the data I want to fetch through the WP Rest API
const redirects = [
  { from: '/old-link-1', to: '/new-link-1' },
  { from: '/old-link-2', to: 'https://externalsite.com/new-link-2' },
]

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

  redirects.forEach(({ from, to, type = 301, method = 'get' }) => {
    server[method](from, (req, res) => {
      res.redirect(type, to)
    })
  })

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

  server.listen(3000, err => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

【问题讨论】：

标签： reactjs express fetch next.js

【解决方案1】：

是的，我相信这样做是可能的。

这个库允许你在 express 中发出 API 请求：https://github.com/request/request

执行如下：

 var request = require('request');
 request('http://www.google.com', function (error, response, body) {
   if (!error && response.statusCode == 200) {
     console.log(body) // Print the google web page.
   }
 })

下一步是在 wordpress 中创建一个端点，其中包含您要创建的所有 301：

function my_custom_endpoint(){
  return 'Hey look, its some data';
}

// Register the rest route here.
add_action( 'rest_api_init', function () {
register_rest_route( 'yournamespace/v1', 'my_custom_endpoint',array(
    'methods'  => 'GET',
    'callback' => 'my_custom_endpoint'
  ));
});

祝你好运，编码愉快！

【讨论】：

我实际上是在搞砸这个，并且能够从 WordPress 中提取我的自定义端点。我刚刚从 WordPress 返回了一组 url，我能够在 server.js 中进行控制台记录，所以我非常接近。

【解决方案2】：

所以，以防万一其他人偶然发现以编程方式添加源自 WordPress 安装的重定向的问题，这是可以做到的。我的技术栈是 React、Next.js，它带有一个 Express 服务器，它从位于网络其他地方的 WordPress 安装中提取数据。

WordPress：

1) 创建一个空白的 WordPress 插件（Google 是你的朋友）

2) 在你的插件中创建一个激活钩子来创建一个数据库（同样，谷歌为每个条目使用 'to_url' 和 'from_url'。

3) 在插件中注册一个 Rest Route（如上面 Tanner 的回答所述）

这条 Rest Route 应该从数据库中提取您的信息并以这种格式将其作为数组返回：

[ { '来自': '/about', 'to': '/about-us' }, { 'from': '/test3', 'to': '/banks/testing-page' }, ]

4) 使用允许用户向该数据库添加条目的表单创建一个插件管理页面。随着您的数据库增长，您从其余 api 获得的响应也会增长，并且您的重定向将无缝地包含在您的项目中。

5) 在您的 React server.js 中，您将需要以下设置

const request = require("request");
let redirects;
request('https://yourwebsite.com/wp-json/YOUR-ROUTE/v2/redirects', function (error, response, body) {
   if (!error && response.statusCode == 200) {
      redirects = JSON.parse(body);
   }
 })
redirects.forEach(({ from, to, type = 301, method = 'get' }) => {
          server[method](from, (req, res) => {
            res.redirect(type, to)
          })
        });

注意事项：确保当您在 php 中使用表单处理数据时，您采取了适当的预防措施来清理和转义所有内容。

【讨论】：