inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

ChatGPT API 입문 강의 - 30분 만에 다국어 번역기 웹 풀스택 개발하기

CORS 오류...가 나오네요!

533

문신호

작성한 질문수 24

0

안녕하세요! 궁금한점이 생겨서 문의 드립니다.. 얼마전까지만 해도 오류가 나오지 않던게.. 갑자기 오류가 나와서 아무리 찾아도 해결이 안되서 질문 드립니다.

오류가 CORS가 나오는데.. 똑같이 작성한거에서 오류가 안나던데 나오니까 당황스럽네요..!


이미지_1.png

코드 입니다.

-python-

from flask import Flask, request, render_template
import openai
openai.api_key = "" (키값은 질문사항 때문에 비웠습니다.)

app = Flask(__name__)


@app.route("/translater", methods=["post"])
def translater():
    data = request.json
    language = data["language"]
    text = data["text"]

    prompt = f"{text}\n\nTranslate this sentence into {language}"
    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[
            {
                "role": "system",
                "content": "you are a translater"
            },
            {
                "role": "user",
                "content": prompt
            }
        ],
        max_tokens=500,
    )
    return response["choices"][0]["message"]["content"]


@app.route("/web")
def web():
    return render_template("index.html")


@app.route("/")
def index():
    return "Hello World"


app.run(host="0.0.0.0", port=8080)


-HTML-

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>번역기</title>
    </head>
    <body>
    번역하는 사이트다! <br />
    <textarea id="text" style="width: 500px; height: 200px;"></textarea>  <br />

    어느 언어로 번역하겠습니까? <br />
    <input id="language" type="text"/> <br />

    번역 하기 <br />
    <button id="button">번역하기</button> <br />

    결과물 보기 <br />
    <textarea id="result" style="width: 500px; height: 200px;"></textarea>
    <script>
        let textareaTag = document.getElementById("text");
        let languageTag = document.getElementById("language");
        let buttonTag = document.getElementById("button");
        let resultTag = document.getElementById("result");

        buttonTag.addEventListener("click", async function () {
            let text = textareaTag.value;
            let language = languageTag.value;
            await fetch("http://127.0.0.1/translater", {
                "method": "post",
                "headers": {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ text, language})
            })
            .then((response) => response.text())
            .then((data) => {
                resultTag.value = data;
            });
        });
    </script>
    </body>
</html>

HTML/CSS python chatgpt

답변 1

0

까룬

작성자 분의 코드와 제 코드와의 차이점은, flask의 port 번호가 8080과 80으로 서로 다릅니다.

 

CORS는 서로 다른 웹사이트로 요청을 보낼 때 나는 에러입니다.

8080으로 port를 열었는데, fetch로는 80 (포트 번호 미지정시 기본 포트)으로 요청을 보내고 있습니다.

 

flask port는 8080으로 여셨고

html의 javascript에서

await fetch("http://127.0.0.1/translater", {

라고 했는데, 뒤에 포트 번호가 안 붙은 경우의 default port는 80번이라서, 서로 다른 주소라서 그래요.

 

웹에서 url 뿐만 아니라, 포트 번호가 다른 경우에도 다른 주소입니다!

 

flask의 port 번호를 80으로 변경하거나,

 

fetch에서 링크를

"http://127.0.0.1:8080/translater"

라고 하시면 됩니다!

0

문신호

빠른답변 감사합니다~!
말씀하신대로 서버주소를 8080으로 변경하니까 해결했습니다~!!

다른포트가 연결되어 있어서 그런지.. 80포트로는 열리지가 않아서 변경하니까 문제가 발생된거 같네요..!!

구글 AI studio에서 마크다운을 받을 수 없습니다.

0

1

0

늘 컴퓨터를 켜두어야 하는 것에 대한 질문입니다.

0

9

1

MMDetection 버전 이슈

0

10

2

1유형 강의 다 나간 후 어떻게 할까요?

0

14

1

점수차가 많이 나는데 따로 하신게 있으신가요?

0

10

1

노션 승인 관련

0

21

3

강의 잘 들었습니다!!

0

14

1

만세력 계산 오류 및 결과 오류

0

28

2

한글 변수의 한글 상태를 만드는 법?

0

19

0

작업형1 모의문제 4번에 3)문제 질문

0

21

2

강의 수강 순서

0

21

1

13, 14강 진행되지 않는 문제

0

15

1

coders 사이트 로그인이 안돼요

0

25

2

호스트 테스트 주소 복사?

0

21

1

이상치 전처리 작업

0

25

2

import 오류

0

23

1

명령팔레트에서 오류

0

38

3

평가결과값 문의

0

29

2

Sonauto V2 text to audio

0

23

2

Part2 자료에 대한 질문입니다.

0

28

3

ChatGPT 프롬프트? 설정관련

0

337

1

gpt api를 파이썬에서만 사용할 수 있나요?

0

353

1

긴 문장을 번역하고 싶습니다!

0

1019

1

500 Internal Server Error

0

678

1