如何修复 nextjs 应用程序中我的 axios 请求中的 CORS 错误

Question

所以当我尝试在另一个本地主机上对我的 api 进行 axios 调用时出现此错误。我怎样才能解决这个问题。我正在使用 Nextjs、ts 和 axios。

这里是函数（写得不好，顺便测试一下）：

  const GetPartners = (e: { preventDefault: () => void; }) => {
      e.preventDefault();
      let token: string =
        "//This is normally correct just changed for question";
      axios
        .get(
          "http://localhost:7071/api/Partners",
          {
            headers: {
              Authorization: "Bearer " + token,
            },
          }
        )
        .then(res => console.log(res.data));
    } 
      return (
      <div className={styles.container}>
        <button onClick={GetPartners}>Get Partners</button>
      </div>
    );
  };
  
  export default Home;

和错误：

Access to XMLHttpRequest at 'http://localhost:7071/api/Partners' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

您可以访问 http://localhost:7071 吗？如果是这样，该应用程序需要在 header.

中设置为通配符允许一切 localhost * 或 Access-Control-Allow-Origin: http://localhost:3031

这与您的请求无关，而与主机允许您的请求的响应有关。

如果您无法控制此环境或其他环境中的该应用程序，则使用代理重写可能是另一种选择。

您可以更详细地查看主题here

Answer 2

A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers.

因此，在您发出从 localhost:3000 到 localhost:7071 的请求时，来源不同，因此正在发出预检请求。

此请求失败，因为您可能不允许在 localhost:7071 服务器上接受来自不同来源的请求，或者我们可以说您没有在此服务器上启用 CORS。

如果您使用的是 NodeJS 服务器和 ExpressJS 中间件，那么您可以使用 CORS middleware 轻松启用 CORS。您只需要做以下事情：

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

但是在生产环境中要小心consequences of using CORS，所以你应该只在开发模式下使用它，或者在生产环境中谨慎使用它。

Answer 3

我最终修复了它。我将这段代码添加到我的 local.settings.json 并修复了它，希望有人觉得它有用！

"Host": {
    "CORS": "*"
  }

如何修复 nextjs 应用程序中我的 axios 请求中的 CORS 错误

How to fix CORS error in my axios request in nextjs app

typescript

axios

next.js