使用API网关的Nextjs应用程序出现CORS错误,仅在客户端

cgvd09ve  于 2023-03-29  发布在  其他
关注(0)|答案(1)|浏览(170)

我不知道如何描述的问题,以其最充分的,我已经一个星期在玩这个,不能让它工作…
我有一个FastAPI服务器,作为连接到API网关的Lambda运行

在FastAPI和API网关中都启用了CORS。
我在Amplify上运行NextJS,NextJS正在执行的请求正在工作,但我的客户端上的请求没有,并且有CORS错误。
我的API是api.example.com/api,而应用程序是example.com

我所尝试的

  • 向每个请求添加以下头"Access-Control-Allow-Origin": '*', "Access-Control-Allow-Headers": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version", "Access-Control-Allow-Methods": 'GET, POST, PUT, DELETE, OPTIONS'
  • 添加重写以创建某种代理
  • 使用CORS Chrome扩展,仍然无法正常工作
    由next完成而不是客户端工作的注册路由

客户端已完成请求

我已经尝试了更多的东西之间,我只是一无所知
这是我创建Axios示例的代码(删除了头文件,但它也不能与它们一起工作)

import axios from 'axios';

export const api = (session: any): any => {
    const headers: { [key: string]: string | number } = {
        "Accept": 'application/json',
    }

    if (session?.user) {
        headers.Authorization = session.user.token;
    }

    const api = axios.create({
        baseURL: process.env.NEXT_PUBLIC_API_DOMAIN,
        withCredentials: true,
        headers
    });

    return api;
};

任何帮助都非常非常感谢

编辑:
错误本身

lambda似乎甚至不能接收我的客户端发出的请求,只能接收来自Nextjs后端的请求。
这让我觉得这是API网关配置或我的客户端请求头配置。
还尝试:

  • 在客户端和API网关上添加Access-Control-Allow-Credentials头为true。
  • 为我的https://example.com的FastAPI CORS中间件特定的源集添加
whhtz7ly

whhtz7ly1#

解决了它,对于任何遇到API网关和Access-Control-Allow-Credentials头的CORS问题的人,我的集成请求是type Mock,所以我的配置不适用。
我和一个AWSMaven(付费服务)打了40分钟的电话,我们错过了lmao,感觉很糟糕。

相关问题