[React/JS] CORS 에러 해결하기(이미지 URL을 API 요청, 이미지 URL로 Blob, Blob로 File 생성)

https://velog.io/@zero-black/CORS-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-Reverse-Proxy-server-%EA%B5%AC%EC%B6%95-with-Nginx

CORS 에러 해결하기 + Reverse Proxy server 구축 with Nginx

위 블로그를 참고했습니다!! ☺️☺️

 

 

 

https://avoc-o-d.tistory.com/90

[React/JS] Image URL을 파일 객체(File object)로 변경하기

우선 저는 Iimage URL로 api요청할 때, CORS 에러를 직면했습니다...

 

 

해결해봅시다!!!!😂😂😂

아래는 결론적으로 해결한 코드입니다..

import axios from 'axios'

const media = axios.create({
  baseURL: "/media/",
});

// url -> file 객체
async function convertURLtoFile(url) {
    let result;
    
    const filename = url.split("/").pop(); // url에서 file 이름 추출
    await media.get(url, { responseType: "blob" }).then((res) => {
      // File 형식에 맞게 파일 생성
      result = new File([res.data], filename, { 
        type: res.data.type,
      });
    });

    return result;
}

 

 

 

 

 

00. http-proxy-middleware 패키지 다운로드

---

npm install http-proxy-middleware

 

 

 

01. setupProxy.js 파일 생성

---

src/setupProxy.js

반드시 src 폴더의 바로 아래에 setupProxy.js을 생성하여야 프록시 설정을 인식할 수 있습니다. 😚

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/media",
    createProxyMiddleware({
      target: 요청할 API 주소,
      changeOrigin: true,
    })
  );
};

저는 이미지 요청을 위해 ✨ /media ✨ 이하 url로 요청을 보내도록 프록시 설정을 해줬습니다.

 

 

 

02. 인스턴스 생성 - create

---

인스턴스를 하나 생성해서 axios 세팅을 해줍니다!

import axios from 'axios'

const media = axios.create({
  baseURL: "/media/",
});

// image url로 API 요청
media.get(url).then((res) => {
	// res 요청 결과~~
});

 

 

 

 

03. 이미지 url로 API 요청

---

import axios from 'axios'

const media = axios.create({
  baseURL: "/media/",
});

// url -> file 객체
async function convertURLtoFile(url) {
    let result;
    
    const filename = url.split("/").pop(); // url에서 file 이름 추출
    await media.get(url, { responseType: "blob" }).then((res) => {
      // File 형식에 맞게 파일 생성
      result = new File([res.data], filename, { 
        type: res.data.type,
      });
    });

    return result;
}

res 콘솔 결과

주의 깊게 살펴볼 부분!

🔥 { responseType: "blob" } 를 통해 Blob 형태로 가져옵니다.
🔥 { type: res.data.type } 를 통해 File의 type을 Blob의 type 그대로 지정해줍니다.

{ responseType: "blob" }을 안 해주면 이렇게 바이너리 string이 와요!

 

 

 

 

 

😂😂😂영(원히)고(통받는)..CORS...😭😭😭