我有一个托管在Vercel www.example.com上的Next.js应用程序,它需要与托管在另一台服务器api.example.com上的后端.NET核心Web API通信。.NET核心Web API已配置为允许CORS,但我的Next.js一直抱怨在使用AXIOS获取数据时无法显示数据,因为响应缺少allow-cors标头:
CORS策略已阻止从源“http://www.example.com”访问位于“api.example.comhttps:www.example.com”的XMLHttpRequest:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头
当我使用npm run dev
在本地运行它时,它工作正常,但是当我构建它然后运行npm run start
时,它就不工作了
有人知道如何解决生产中的cors问题吗?
9条答案
按热度按时间kgsdhlau1#
我找到了一个解决方案here:
基本上,我只需要在根目录中添加一个next.config.js文件,并添加以下内容:
bq9c1y662#
如果你想在
nextjs
中使用cors
库,我为它创建了一个库nextjs-cors
。https://www.npmjs.com/nextjs-cors
https://github.com/yonycalsin/nextjs-cors
页面/API/whoami.{ts,js}
wqnecbli3#
这是服务器不接受OPTIONS请求的问题,因为路由被声明为GET::something或POST::一些东西,所以预检无法通过,POST请求被拒绝,希望这将有助于其他人,以防止几个小时的谷歌搜索,所以在我的情况下(Node.js + Express.js),我不得不添加到我的server.js
wnrlj8wa4#
我也有类似的问题,我是从这个页面打电话:
页/页1.js
但解决方案是对“pages/api”目录中的本地API文件进行axios调用,该本地API文件将处理对外部Web服务器的请求,从而避免CORS问题。
页/页1.js
页面/API/获取页面1数据. js
型
envsm3lx5#
做一个额外的检查,如果你的基本网址是正确的,这是我的问题
xmq68pz96#
在我的例子中,由于一个激进的HTTP方法过滤器,预检请求失败了。
请确保指定
您可以使用https://vercel.com/support/articles/how-to-enable-cors#enabling-cors-in-a-next.js-app允许所有方法,但要确保每个端点都为OPTIONS HTTP方法返回2XX状态代码。
xmjla07d7#
请确保它是
CORS
,而不是其他东西。例如,在我的情况下,我得到了400
响应。请查看该请求的Response
选项卡以获取信息。r6l8ljro8#
在谷歌上搜索了几个小时后,我在next上找到了解决方案--docs本身!!!
请参阅github上的以下存储库
使用CORS的API路径示例
https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors
g52tjvyc9#
我有Next.js应用程序,其中包含graphql和Apollo客户端设置(Apollo版本:3.5.10)。为了在任何组件内进行查询,您必须使用Apollo客户端提供的“client”变量。您需要在项目根目录中有apollo-client.js文件,以便Apollo客户端可以在任何组件内使用它进行查询。在任何组件内,当您尝试进行以下查询时:client.query(...),使用apollo-client文件的这些设置会引发“cors”错误。但是,您可以通过在apollo-client文件中添加头属性来修复此错误。
这是旧设置:
阿波罗客户端.js(旧版本)
这是新设置:
apollo-client.js(新版本)
这样,在任何组件内部执行查询时,都不会出现任何“cors”错误。