next.js 我的AWS API Gateway API的CORS错误:访问控制允许原点

0ejtzxu1  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(117)

下面的错误是我每次尝试从Next App与端点通信时都会遇到的错误:

Access to fetch at 'https://xxxxxx.execute-api.us-east-1.amazonaws.com/items' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

每当我尝试从我的Next.js应用程序与端点通信时,我都会遇到以下错误:
下面是我的配置

这里是我的Lambda函数的结构

import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { DynamoDBDocumentClient, ScanCommand, PutCommand, GetCommand, DeleteCommand } from "@aws-sdk/lib-dynamodb";

const dynamoDBClient = new DynamoDBClient({});
const s3Client = new S3Client({});
const client = new DynamoDBClient({});
const dynamoDBDocumentClient = DynamoDBDocumentClient.from(dynamoDBClient);

const dynamo = DynamoDBDocumentClient.from(client);

const tableName = " ";
const s3BucketName = "";

export const handler = async (event) => {
  const response = {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Headers": "rid,fdi-version,anti-csrf,st-auth-mode",
      "Access-Control-Allow-Origin" : "*",
      "Access-Control-Allow-Methods": "OPTIONS,POST,GET, PUT",
       "Cache-Control": "max-age=0, no-store, must-revalidate",
       "Access-Control-Allow-Credentials": "true",

    },
    body: "",
  };

  try {
    switch (event.routeKey) {
      case "POST /items":
       
        break;

      case "GET /items":
        
        break;

      case "GET /items/{id}":
       
        break;

      case "DELETE /items/{id}":
        
        break;

      default:
        throw new Error(`Unsupported route: "${event.routeKey}"`);
    }
  } catch (err) {
    response.statusCode = 400;
    response.body = err.message;
  }

  return response;
};

// Function to generate a random alphanumeric string

另外,这就是我的handleSubmit的样子

const handleSubmit = async (event) => {
    event.preventDefault();
  
      var myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/json");
      
      var raw = JSON.stringify({
        "id": formData.projectId,
        "projectName": formData.projectName,
        "clientName": formData.clientName,
        
      });
      
      var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow',
        // mode: 'no-cors',
      };
      
      fetch("https://xxxxxxx.execute-api.us-east-1.amazonaws.com/items", requestOptions)
         .then(response => console.log(response.json()))
         .then(result => console.log(result, 'resulttttt'))
         .catch(error => console.log('error', error))

  };
omjgkv6w

omjgkv6w1#

我也解决了同样的问题。解决并停止CORS问题。像这样写你的Fetch。const res = await fetch('https://xxxxxxx.execute-api.us-east-1.amazonaws.com/items');从那里您将能够console.log res与const data = await res.json();
关于console.error() Next.js会自动处理这个问题。

相关问题