下面的错误是我每次尝试从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))
};
1条答案
按热度按时间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会自动处理这个问题。