在Next.js项目中配置跨域请求通常涉及到两个部分：客户端的配置和服务器端的配置。
- 客户端配置：在
_document.js文件中设置CORS。
// pages/_document.js
import Document from 'next/document';
class MyDocument extends Document {
render() {
return (
<html>
<Head />
<body>
<Main />
<NextScript />
{process.env.NODE_ENV === 'development' ? (
<script
dangerouslySetInnerHTML={{
__html: `
if (window.location.hostname === 'localhost') {
document.domain = 'localhost';
}
`,
}}
/>
) : null}
</body>
</html>
);
}
}
export default MyDocument;
- 服务器端配置：在服务器入口文件中（通常是
server.js或index.js），使用next中间件时，可以配置代理来实现跨域。
// server.js 或 index.js
const next = require('next');
const express = require('express');
const devProxy = require('./proxy');
const { PORT = 3000 } = process.env;
const app = next({ dev: process.env.NODE_ENV !== 'production' });
const handle = app.getRequestHandler();
app.prepare()
.then(() => {
const server = express();
// 如果是开发模式，配置代理来解决跨域
if (process.env.NODE_ENV === 'development') {
server.use('/api', (req, res) => {
// 代理到目标服务器
devProxy(req, res);
});
}
server.all('*', (req, res) => handle(req, res));
server.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
})
.catch((err) => {
console.error(err);
process.exit(1);
});
在proxy.js中配置代理规则：
// proxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://target-domain.com', // 目标服务器地址
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
})
);
};
以上代码提供了客户端和服务器端的跨域配置示例。在开发环境中，通过_document.js配置CORS，在生产环境中，确保服务器正确配置了CORS头部。在服务器端，使用http-proxy-middleware来代理请求到目标服务器，并设置changeOrigin为true来确保请求头中的Origin正确。