reactjs - NextJs CORS 问题
问题描述
我在www.example.com的 Vercel 上托管了一个 Next.js 应用程序,它需要与托管在 api.example.com 的不同服务器上的后端 .NET Core Web API 进行通信。.NET 核心 web api 已配置为允许 CORS,但我的 Next.js 一直抱怨当我使用 AXIOS 获取数据时无法显示数据,因为响应缺少 allow-cors 标头:
从源“http://www.example.com”访问“https://api.example.com”的 XMLHttpRequest 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:没有“访问” -Control-Allow-Origin' 标头出现在请求的资源上
当我使用本地运行它时它工作正常npm run dev
,但是当我构建它然后运行时它不起作用npm run start
有谁知道如何解决生产中的cors问题?
解决方案
我在这里找到了解决方案:
基本上,我只需要在根目录下添加一个 next.config.js 文件并添加以下内容:
// next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/api/:path*',
destination: 'https://api.example.com/:path*',
},
]
},
};
推荐阅读
- c++ - 无法在套接字编程中将 int 从服务器发送到客户端
- angular - Angular Clarity 为数据网格创建子组件
- php - ipn paypal 不执行
- javascript - Javascript 来设置 CSS 属性 grid-template-columns 和 grid-template-rows
- google-apps-script - 通过电报机器人和谷歌应用脚本在谷歌表格中填写订单
- rust - 如何获取 Rc 或 Boxed 值的内部值的 TypeId,而不是封闭类型的 TypeId?
- excel - 用于图片的 XlPasteType 枚举 (Excel)
- javascript - 动态更改表 ID
- sql-server - ASP.NET MVC 将数据从控制器/视图插入 SQL Server 数据库(实体框架数据库优先)
- android - facebook sdk:“必须使用活动访问令牌来查询有关当前用户的信息”