api - nextjs 接口转发 跨域？

Question

nextjs。我想再api里面提供一个接口，用来转发客户端组件发送的请，来解决跨域。

可以给个demo嘛？

Answer 1

试试这个？
新建一个 Optional Catch-all Segments 路由

文件目录结构app└── proxy    └── [[...proxy]]        └── route.ts

route.ts 文件内容

import { NextRequest } from 'next/server'export const GET = async (req: NextRequest, { params: { proxy = [] } }: { params: { proxy: string[] } }) => {  const searchParams = req.nextUrl.searchParams  const res = await fetch(`https://baidu.com/${proxy.join('/')}?${searchParams}`)  return new Response(res.body)}

浏览器访问 http://localhost:3000/proxy/ 即可打开百度首页，
搜索一个词 百度格式为 https://www.baidu.com/s?wd=%E6%90%9C%E7%B4%A2&......
将 /s?wd=%E6%90%9C%E7%B4%A2&...... 这段拼接到 http://localhost:3000/proxy/ 之后访问，将进入搜索结果页。

fetch 里面的 https://baidu.com 替换为自己需要代理访问的域名
这个未将 http header 信息传递至目标服务

Answer 2

你可以直接使用中间件next-http-proxy-middleware

Answer 3

当涉及到使用Next.js进行接口转发以解决跨域问题时，可以使用Next.js的内置功能next-server来处理。下面是一个简单的示例代码，演示了如何在Next.js中实现接口转发：

// next.config.jsmodule.exports = {  serverRuntimeConfig: {    cors: true, // 启用CORS  },  devServer: {    headers: {      'Access-Control-Allow-Origin': '*', // 允许来自任何源的请求      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', // 允许的请求方法      'Access-Control-Allow-Headers': 'Content-Type, Authorization', // 允许的请求头    },  },};

在上述代码中，我们通过在next.config.js文件中配置serverRuntimeConfig和devServer选项，以启用CORS并设置相应的跨域头部信息。通过这些配置，Next.js将允许来自任何源的请求访问你的API接口。

接下来，你可以在Next.js的API文件夹中创建一个接口，用于转发客户端组件发送的请求。以下是一个示例：

// api/my-api-endpoint.jsconst fetch = require('node-fetch');export default async function handler(req, res) {  // 获取客户端发送的请求数据  const data = req.body;  // 构建转发请求的URL和选项  const url = 'https://example.com/api-endpoint'; // 目标API的URL  const options = {    method: 'POST', // 请求方法    headers: {      'Content-Type': 'application/json', // 请求头设置    },    body: JSON.stringify(data), // 请求体设置  };  // 发送转发请求并处理响应  try {    const response = await fetch(url, options);    const result = await response.json(); // 解析响应数据为JSON格式    res.status(200).json(result); // 将响应数据返回给客户端  } catch (error) {    console.error('Error during API request:', error);    res.status(500).json({ error: 'An error occurred during the API request' }); // 处理错误情况下的响应  }}

在上述代码中，我们使用node-fetch模块来发送转发请求。你需要将url替换为目标API的实际URL，并根据需要自定义请求方法和选项。然后，我们通过调用fetch函数发送转发请求，并使用res.status()和res.json()方法将响应数据返回给客户端。