Sharryhong's Front-End
  • About Sharryhong's Front-End Blog.
  • Front-End Dev
    • Flutter
      • API Key 안전하게 숨기기. Cloudflare Workers!
      • Web CORS 에러
    • Vue.js
      • usePagination - composition api (vue2)
      • Pagination Component
      • Vue Image Skeleton
      • Sort an Array of Objects by Boolean property
      • Dynamic Components
      • LoadingBar Component
      • composition-api 사용하여 menu 의 outside click 시 close
      • vue+TypeScript
      • Vue.js 개발자를 위한 VS Code
      • Vue3 Chrome Extension
      • input file 선택된 파일 명 reset하기
      • element 내부 scroll 될 때, ScrollTop 값에 따라 div를 보이게, 안보이게 제어하기
      • 진입한 url path에 맞게 메서드 실행
    • React
      • 절대경로(absolute path) 설정, jsx파일로 이동 설정
      • useContext rerender issue
      • Firebase v9 Auth with React
      • Firebase v9 Realtime Database with React
      • React Star Rating (별점 표시)
      • React App deploying (배포)
    • Next.js
      • CSR, SSR, Next.js
    • API Mocking
      • Vue 에서 msw 적용하기
    • Storybook
      • styled-component theme.ts가 storybook엔 적용안되는 이슈
      • storybook에서 alias path 안되는 이슈
      • storybook에 Global Style 적용하기
  • etc
    • brew update
    • npm upgrade (mac)
  • DEV BETTER
    • Clean Code
      • Clean Code JavaScript 강의
        • Variables - 변수 다루기
        • Boundary - 경계 다루기
        • Conditional - 분기 다루기
        • Array - 배열 다루기
      • Tip. 클린 코드를 위한 5가지 팁
      • Tip. 코딩 잘하는 팁 3가지
    • 웹 성능 최적화 (performance)
      • performance 강의
        • loading, rendering performance
        • Tools
        • Image size optimization
        • bottleneck (병목) code 탐색
Powered by GitBook
On this page
  • 이슈
  • 해결 방법

Was this helpful?

  1. Front-End Dev
  2. Flutter

Web CORS 에러

2023-06-13

PreviousAPI Key 안전하게 숨기기. Cloudflare Workers!NextVue.js

Last updated 1 year ago

Was this helpful?

이슈

Youtube Data API 사용시 응답값 중 썸네일 이미지 CORS 에러

확인해보니 ios, 안드로이드에서는 잘 나오는데, pc web 크롬, 사파리에서 CORS 에러가 나오고 있었습니다.

해결 방법

빌드시 아래 명령어로! 

flutter build web --web-renderer html --release

구글링 해서 여러 방법으로 테스트 해보았는데요

다른 방법은 크롬에서는 되고 사파리에서는 안되는 등의 이슈가 있었습니다.

저 방법으로 할 경우, 개발 중일때는 이미지가 cors에러가 나지만 빌드 후 배포하면 이미지가 잘 나옵니다.

개발 중일 때도 확인해보려면 아래 명령어를 입력하시면 됩니다. 

flutter run -d chrome --web-renderer html

자료

https://velog.io/@thovy/TROUBLESHOOTING-Flutter-web-CORS

🎉
👍