乐闻世界logo
搜索文章和话题

Nextjs 如何解决 cors 问题?

5 个月前提问
21 天前修改
浏览次数270

6个答案

1
2
3
4
5
6

在使用 Next.js 开发应用程序时,跨源资源共享(CORS)是一个常见的问题,因为浏览器出于安全考虑限制了跨域 HTTP 请求。Next.js 可以通过几种方式来解决 CORS 跨域问题:

1. 后端代理

Next.js 支持创建 API 路由,这意味着我们可以在 Next.js 应用程序中创建一个代理路由,将请求从前端发送到这个代理路由,然后由这个路由将请求转发到目标服务器。这种方式可以避免直接从前端向目标服务器发送跨域请求。例如:

jsx
// pages/api/proxy.js export default async (req, res) => { const { query } = req; // 目标服务器的URL const targetUrl = 'https://example.com/api/data'; try { const apiResponse = await fetch(targetUrl, { headers: { // 设置必要的头信息 'Content-Type': 'application/json', // 如有需要,这里可以添加认证等其他头信息 }, }); const data = await apiResponse.json(); res.status(200).json(data); } catch (error) { res.status(500).json({ message: 'Error fetching data' }); } };

2. 配置CORS策略

如果你控制着目标服务器,你可以在服务器上设置 CORS 策略以允许来自你的 Next.js 应用程序的请求。这通常涉及到在服务器的响应头中设置 Access-Control-Allow-Origin 和其他相关的 CORS 头。例如,如果你的服务器是用 Express.js 构建的,你可以使用 cors 中间件来简化这个过程:

javascript
// 在你的 Express 应用中 const cors = require('cors'); app.use(cors({ origin: 'https://your-nextjs-app.com' // 允许你的 Next.js 应用域名的请求 }));

3. 使用第三方服务

如果无法控制服务器的 CORS 策略,并且你需要某种快速的解决方案,你也可以利用一些第三方的服务或代理,例如 https://cors-anywhere.herokuapp.com/,这些服务可以作为代理转发你的请求,并附加正确的 CORS 头信息。但是,这应该只作为临时解决方案,因为它可能引入额外的延迟,并且可能不安全。

4. Next.js 中间件(Next.js 12+ 版本)

从 Next.js 12 开始,Next.js 引入了中间件功能,这允许你在请求到达页面或 API 路由之前执行服务器端代码。你可以在中间件中添加 CORS 头,从而处理跨域请求:

jsx
// pages/_middleware.js import { NextResponse } from 'next/server'; export function middleware(req) { const res = NextResponse.next(); res.headers.set('Access-Control-Allow-Origin', '*'); res.headers.set('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE,OPTIONS'); res.headers.set('Access-Control-Allow-Headers', 'Content-Type,Authorization'); return res; }

以上是处理 Next.js 应用中 CORS 问题的几种方法。选择哪一种方法取决于你的应用需求、安全性要求以及你是否能控制服务器端。

2024年6月29日 12:07 回复

在这里找到了一个解决方案:

基本上,我只需要在根目录中添加一个 next.config.js 文件并添加以下内容:

shell
// next.config.js module.exports = { async rewrites() { return [ { source: '/api/:path*', destination: 'https://api.example.com/:path*', }, ] }, };
2024年6月29日 12:07 回复

如果你想使用 cors中的库 nextjs,可以考虑使用nextjs-cors

https://www.npmjs.com/nextjs-cors

https://github.com/yonycalsin/nextjs-cors

页面/api/whoami.{ts,js}

shell
import NextCors from 'nextjs-cors'; async function handler(req, res) { // Run the cors middleware // nextjs-cors uses the cors package, so we invite you to check the documentation https://github.com/expressjs/cors await NextCors(req, res, { // Options methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'], origin: '*', optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }); // Rest of the API logic res.json({ message: 'Hello NextJs Cors!' }); }
2024年6月29日 12:07 回复

我遇到了类似的问题,我是从这个页面拨打电话的:

页面/page1.js

shell
export default async function page1() { const data = await axios.post('https://www.dominio.com/xxx' , {param: 1}, headers) }

但解决方案是对“pages/api”目录中的本地 API 文件进行 axios 调用,该本地 API 文件将处理对外部 Web 服务器的请求。这避免了 CORS 问题。

页面/page1.js

shell
export default async function page1() { const data = await axios.post('/api/get_page1_data', {param: 1} ) }

页面/api/get_page1_data.js

shell
export default async function handler(req, res) { try{ const data = await axios.post('https://www.dominio.com/xxx' , {param: req.body.param}, headers) res.status(200).json(data) } catch (error) { console.error(error) return res.status(error.status || 500).end(error.message) }
2024年6月29日 12:07 回复

这是服务器不接受 OPTIONS 请求的问题,因为路由被声明为 GET::something 或 POST::something,所以预检无法通过并且 POST 请求被拒绝,希望这将帮助其他人避免几个小时谷歌搜索,所以在我的例子中(Node.js + Express.js)我必须将其添加到我的 server.js 中

shell
app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "*"); res.header( "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization" ); if (req.method == "OPTIONS") { res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET"); return res.status(200).json({}); } next(); });
2024年6月29日 12:07 回复

额外检查一下您的基本网址是否正确,这是我的问题

2024年6月29日 12:07 回复

你的答案