提问人：Shin Ji-Yong 提问时间：11/10/2023 最后编辑：phuziShin Ji-Yong 更新时间：11/10/2023 访问量：33
访问在“...”处提取从原产地“......”已被 CORS 策略阻止 [重复]
Access to fetch at '...' from origin '...' has been blocked by CORS policy [duplicate]
问：
在此处输入图像描述我尝试克隆 chatGPT 网络服务的编码，它在 localhost 中工作正常。但是当我使用 cloudflare（前端）和 aws lambda（后端）在线部署它时，它被 CORS 策略阻止了。似乎我错过了什么，但我找不到它是什么。
错误信息： CORS 策略阻止了从源“https://chatdodge-practice.p ages.dev”在“https://g7zt8zi1k5.execute-api.ap chatdodge-practice.pages.dev/:1 -northeast-2.amazonaws.com/prod/fortune Tell”处提取的访问：对预检请求的响应未通过访问控制检查：当请求的凭据模式为“include”时，响应中“Access-Control-Allow-Origin”标头的值不得为通配符 **。
前端：
<!DOCTYPE HTML>
<html>
<head>
<title>fortunetell</title>
<style>{...}</style>
</head>
<body>
<div id="intro" class="introContainer" >
<img src="">
<label for="date">birthday</label>
<input id="date" type="date">
<label for="hour" >birthtime</label>
<select id="hour" name="hour">
<option value="">don't know</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<button onclick="start()">tell me today's fortune</button>
</div>
<div id="chat">
<div id="chatContainer">`your text`
<div id="chatMessages"></div>
</div>
<div id="messageContainer">
<input type="text" id="userMessage" placeholder="input messages">
<button id="sendMessageButton">send</button>
</div>
<div id="loading">bringing fortune</div>
</div>
<script>
const chatMessages = document.getElementById("chatMessages");
const userMessageInput = document.getElementById("userMessage");
const sendMessageButton = document.getElementById("sendMessageButton");
const loadingDiv = document.getElementById("loading");
let isFetching = false;
let userMessage = [];
let assistantMessage = [];
let myDateTime=''
document.getElementById("chat").style.display="none";
function start(){
const date = document.querySelector('#date').value;
const hour = document.querySelector('#hour').value;
if (date ==''){
alert('input birthday.');
return;
}
myDateTime=date+' '+hour;
document.getElementById("intro").style.display="none";
document.getElementById("chat").style.display="block";
}
function addMessage(message, isUser = false) {
const messageDiv = document.createElement("div");
messageDiv.className = isUser ? "message user" : "message";
messageDiv.textContent = message;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function sendMessage() {
const message = userMessageInput.value;
if (message && !isFetching) {
userMessageInput.value = "";
userMessage.push(message);
addMessage(message, true);
isFetching = true;
loadingDiv.style.display = "block";
const data = {
myDateTime:myDateTime,
userMessage: userMessage,
assistantMessage: assistantMessage
};
fetch("/*gateway api endpoint*/", {
method: "POST",
credentials:"include",
headers: {
"statuscode":200,
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
.then(response => {
if (!response.ok) {
throw new Error('server response error');
}
return response.text();
})
.then(responseData => {
addMessage(responseData);
assistantMessage.push(responseData);
})
.catch(error => {
console.error("failed:", error);
addMessage("an error accured while bringing fortune.");
})
.finally(() => {
isFetching = false;
loadingDiv.style.display = "none";
});
}
}
sendMessageButton.addEventListener("click", sendMessage);
userMessageInput.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
sendMessage();
}
});
</script>
</body>
</html>
后端：
import OpenAI from 'openai';
import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import serverless from 'serverless-http';
const openai = new OpenAI({
apiKey: '/*api key*/', // defaults to process.env["OPENAI_API_KEY"]
});
const app = express();
// Resolve CORS issue, allow requests only from a specified domain
var corsOptions = {
origin: 'https://chatdodge-practice.pages.dev', // Change to the frontend domain address
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
methods: 'POST', // Allow POST method
allowedHeaders: ['Content-Type'], // Allow Content-Type header
}
app.use(cors(corsOptions));
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.post('/fortuneTell', async function (req, res) {
const { myDateTime, userMessage, assistantMessage } = req.body;
let todayDateTime = new Date().toLocaleString('en-US', { timeZone: 'America/New_York' }); // Change to the desired time zone
let messages = [...]
while (userMessage.length != 0 || assistantMessage.length != 0) {
if (userMessage.length != 0) {
messages.push({
role: "user", content: String(userMessage.shift()).replace(/\n/g, ''),
});
}
if (assistantMessage.length != 0) {
messages.push({
role: "assistant", content: String(assistantMessage.shift()).replace(/\n/g, "")
});
}
}
async function main() {
try {
const completion = await openai.chat.completions.create({
model: 'gpt-3.5-turbo',
messages: messages,
});
const response = completion.choices[0].message['content'];
res.header("Access-Control-Allow-Origin", "https://chatdodge-practice.pages.dev"); // Set the appropriate origin
res.header("Access-Control-Allow-Credentials", true); // Allow credentials
res.send(response); // Send the result to the client
} catch (error) {
console.error(error);
res.status(500).send('Server Error'); // Error handling
}
}
main();
});
module.exports.handler = serverless(app);
我尝试使用 chatGPT 处理它，上面的代码是最终结果。我已经检查了我可以检查的所有 aws lambda 设置，但它仍然无法出现相同的错误。
答： 暂无答案
评论