【发布时间】：2019-10-26 09:45:57
【问题描述】：
我正在使用 next.js 作为我的前端框架和 wordpress rest api 作为我的后端来创建应用程序。要使用 WPAPI 库从 wp-rest-api im 获取路由，并且在 localhost 环境中没有任何问题，但是当我上传我的应用程序以在生产服务器（VPS 机器）上显示时，它因 CORS 错误而发疯，我可以' t 从我的后端获取任何东西，因为我得到错误： 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);
});
cors 被阻止的端点的预期输出应如下所示： expected output
【问题讨论】：
-
响应的 HTTP 状态码是什么？您可以使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误，而不是 200 OK 成功响应？
-
我用前端添加了一个指向我的网站的链接 - 如果你能看一下，因为我在这条路线上只看到 301 代码，然后中止
-
好的，所以我自己尝试了
http://igorszostek.pl:3000/，但我无法重现错误。具体来说，我看到前端 JavaScript 代码正在向https://igorszostek.pl/projekty/codevly2/wordpress/wp-json/menus/v1/locations/header-menu发出一个跨域 XHR 请求，它得到了一个 200 OK 响应，其中包含所有正确的 CORSAccess-Control-Allow-\*标头。我在 Chrome、Firefox 和 Safari 中进行了尝试，其中任何一个都没有出现 CORS 错误。 （我看到的唯一错误是Error: Invalid value for <svg> attribute height="auto"。） -
您是否在其他浏览器中尝试过该网站？您是否尝试过清除网站的浏览器缓存，或强制重新加载？鉴于无法重现 CORS 错误，问题可能是：您的浏览器正在加载文档的先前缓存版本——在您在后端添加 CORS 响应标头之前浏览器缓存的版本。我想你也有可能有一个干扰的浏览器扩展。
标签： javascript php wordpress next.js