• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Next.js 게시판 cors 에러관련 질문

cors 에러관련 질문

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 글쓴이
  • #121580

    박병주
    참가자
    강의 잘 보고 있습니다 선생님 타슼으로 한번 더 정독중인데 cors 관련 질문 하나만 드립니다.
    'use client'
    import { useState } from "react";
    interface UploadResponse {
      url: string;
      fields: Record<string, string>;
    }
    export default function Write(){
      let [src,setSrc] = useState("")
        return (
            <div className="p-20">
              <form action="/api/post/write" method="POST">
                <input name="title" placeholder="글제목"/>
                <input name="content" placeholder="글내용"/>
                <input type="file" accept="image/*"
                onChange={async(e)=>{
                  if(e.target.files && e.target.files.length > 0){
                    let file = e.target.files[0]
                    let filename = encodeURIComponent(file.name)
                    let res = await (await fetch('/api/post/image?file=' + filename)).json() as UploadResponse;
                    //S3 업로드
                    const formData = new FormData()
                    // 기존 코드에서 file을 별도로 처리
                    formData.append('file', file);
                    // 나머지 fields 추가
                    Object.entries(res.fields).forEach(([key, value]) => {
                      if (typeof value === 'string') {
                        formData.append(key, value);
                      }
                    });
                    let 업로드결과 = await fetch(res.url, {
                      method: 'POST',
                      body: formData,
                    })
                    console.log(업로드결과)
                    setSrc(업로드결과.url + '/' + filename)
                  }
                 
                }}/>
                < img src={src}/>
                <button type="submit">전송</button>
              </form>
            </div>
          )
        
    }
    console.log(res) 치면 url이랑 잘 나오는 상태이고
    aws에서 cors 처리 해주었는데도 업로드결과 콘솔 로그에 치면 콘솔에 cors 에러가 뜨는 상황입니다
    Response {type: 'cors', url: 'https://s3.ap-northeast-2.amazonaws.com/zzuzzustudy', redirected: false, status: 400, ok: false, …}
    body: (...)
    bodyUsed: false
    headers: Headers {}
    ok: false
    redirected: false
    status: 400
    statusText: "Bad Request"
    type: "cors"
    url: "https://s3.ap-northeast-2.amazonaws.com/zzuzzustudy"
    [[Prototype]]: Response 
    이렇게 뜹니다
    
    
    • 이 게시글은 박병주에 의해 1 년, 2 월 전에 수정됐습니다.
    #121598

    codingapple
    키 마스터
    aws 콘솔들어가서 s3의 cors 부분 설정 잘해놨는지 확인해봅시다
     
    #121650

    박병주
    참가자
    [
        {
            "AllowedHeaders": [
                "*"
            ],
            "AllowedMethods": [
                "PUT",
                "POST"
            ],
            "AllowedOrigins": [
                "*"
            ],
            "ExposeHeaders": [
                "ETag"
            ]
        }
    ]
    현재 이렇게 해놓은 상태입니다
    #121685

    codingapple
    키 마스터
    그럼 서버에서 보내주는 url이 이상할수도요 res.url 같은거에 이미지이름 들어간 url 잘나오나 출력해봅시다
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠