在NextJ中使用Axios时缺少CORS标题

发布于 2025-02-11 23:21:10 字数 1232 浏览 0 评论 0原文

我使用的是Nestjs后端带有NextJS Frontend，均分别托管。

nestjs后端

i在后端启用了Cors，如下所示：

app.enableCors({ credentials: true, origin: process.env.FRONTEND_URL });

使用 cors-test.cose-test.codehapp.codehappy.codehappy .dev 检查CORS标题，一切看起来都不错。所有标头都存在，访问控制 - 允许 - 原始标题指向前端托管的正确域。

nextjs frontend

在NextJS前端我使用Axios向后端提出请求（与上面使用的完全相同的URL）。 Chrome中的要求缺少所有CORS标题。当需要HTTP请求时，下面的AXIOS实例将导入。

import Axios from 'axios';

const api = Axios.create({
    baseURL: process.env.BACKENDURL,
    withCredentials: true
});

export default api;

控制台中的错误：

前跨请求：

原文

I'm using a NestJS backend with a NextJS frontend, both hosted seperately.

NestJS Backend

I enabled CORS in the backend as follows:

app.enableCors({ credentials: true, origin: process.env.FRONTEND_URL });

When using cors-test.codehappy.dev to check the CORS headers everything looks good. All headers are present and the access-control-allow-origin header points to the right domain where the front-end is hosted on.

NextJS Frontend

On the NextJS frontend I'm using Axios to make request to the backend (the exact same url as used above).However, when creating a request the preflight request in Chrome is missing all CORS headers. The Axios instance below is imported when a HTTP request is needed.

import Axios from 'axios';

const api = Axios.create({
    baseURL: process.env.BACKENDURL,
    withCredentials: true
});

export default api;

The error in the console:

The preflight request:

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

究竟谁懂我的在乎 2025-02-18 23:21:11

在next.config.js中

module.exports = {
//avoiding CORS error, more here: https://vercel.com/support/articles/how-to-enable-cors
    async headers() {
        return [
          {
            // matching all API routes
            source: "/api/:path*",
            headers: [
              { key: "Access-Control-Allow-Credentials", value: "true" },
              { key: "Access-Control-Allow-Origin", value: "*" },
              { key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
              { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
            ]
          }
        ]
    },
}

in next.config.js

module.exports = {
//avoiding CORS error, more here: https://vercel.com/support/articles/how-to-enable-cors
    async headers() {
        return [
          {
            // matching all API routes
            source: "/api/:path*",
            headers: [
              { key: "Access-Control-Allow-Credentials", value: "true" },
              { key: "Access-Control-Allow-Origin", value: "*" },
              { key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
              { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
            ]
          }
        ]
    },
}

回复收藏 0 原文

~没有更多了~