【NextJS】整个项目跨域配置
在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
正确。
评论已关闭