NextJs CORS 问题答案

【问题标题】：NextJs CORS issueNextJs CORS 问题
【发布时间】：2021-03-11 11:47:38
【问题描述】：

我在 www.example.com 上托管在 Vercel 上的 Next.js 应用程序，它需要与托管在 api.example.com 上的不同服务器上的后端 .NET Core Web API 进行通信。 .NET 核心 Web api 已配置为允许 CORS，但我的 Next.js 一直抱怨当我使用 AXIOS 获取数据时无法显示数据，因为响应缺少 allow-cors 标头：

CORS 策略已阻止从源“http://www.example.com”访问“https://api.example.com”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：请求的资源上没有“Access-Control-Allow-Origin”标头

当我使用 npm run dev 在本地运行它时它工作正常，但当我构建它然后运行 npm run start 时它不起作用

有人知道如何解决生产中的 cors 问题吗？

【问题讨论】：

您能否澄清您所说的服务器“配置为允许 CORS”是什么意思？似乎您的后端不允许列出您的前端。
@JBallin .NET Core Web API 使用 .UseCors 中间件来允许 CORS 访问。后端似乎工作正常，因为我还有一个使用 create-react-app 创建并用作静态文件的 React 应用程序。该应用程序能够很好地与我的后端通信。我认为这里的问题与 Next.Js 服务器端逻辑有关
我这边最疯狂的是它进行身份验证但无法获取其他数据

标签： reactjs cors next.js

【解决方案1】：

额外检查您的基本 URL 是否正确，这是我的问题

【讨论】：

【解决方案2】：

如果你想使用nextjs 中的cors 库，我为它创建了一个库nextjs-cors。

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

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

pages/api/whoami.{ts,js}

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!' });
}

【讨论】：

【解决方案3】：

请确保它是CORS，而不是其他东西。例如，就我而言，我收到了400 响应。请查看该请求的Response 选项卡以获取信息。

【讨论】：

它清楚地表明他们有下一个 cors 问题。 400 状态代码与 COR 问题无关，尤其是下一个与 cors 相关的问题

【解决方案4】：

这是服务器不接受 OPTIONS 请求的问题，因为路由被声明为 GET::sometnig 或 POST:: something，所以预检无法通过并且 POST 请求被拒绝，希望这对其他人有帮助为了防止数小时的谷歌搜索，所以在我的情况下（Node.js + Express.js）我不得不将它添加到我的 server.js

  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();
});

【讨论】：

【解决方案5】：

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

pages/page1.js

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

但解决方案是让 axios 调用“pages/api”目录中的本地 API 文件，而这个本地 API 文件将处理对外部网络服务器的请求。这样可以避免 CORS 问题。

pages/page1.js

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

pages/api/get_page1_data.js

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)
  }

【讨论】：

【解决方案6】：

我找到了解决方案here：

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

// next.config.js
module.exports = {
    async rewrites() {
        return [
          {
            source: '/api/:path*',
            destination: 'https://api.example.com/:path*',
          },
        ]
      },
  };

【讨论】：

我得到了答案并且它有效。但是为什么 NextJS 会发生这种情况呢？
它不适用于 Vercel。任何线索为什么？
我想这里发生的事情是这个配置将被传递到 next.js 服务器，以代理对 example.com/api 的所有调用到 api.example.com。当我在那里部署我的应用程序时，它应该可以在 Vercel 上运行，而且它似乎运行良好。
您还需要将相同的配置添加到 vercel.json：vercel.com/support/articles/…