카카오 공유하기 초기 script 불러올때 cors 에러 발생

JavaScript
2

Hello. @김경한0184

This CORS error is related to the integrity check of the Cocoa SDK. I can suggest several methods to solve it:

  1. Simplest Solution - remove the integrity property:
<Script
src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
onLoad={() => {
setKakaoLoaded(true);
}}
onError={(e) => {
console.log(e);
}}
/>
  1. Add crossOrigin property:
<Script
 src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
 integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmEc1VDxu4yyC7wy6K1Hs90nka"
 crossOrigin="anonymous"
 onLoad={() => {
 setKakaoLoaded(true);
 }}
 onError={(e) => {
 console.log(e);
 }}
/>
  1. What you need to do in Kakao Developers Console:
  • Go to web platform settings
  • Add localhost:3000 with the full URL format: http://localhost:3000
  • If you are using HTTPS: https://localhost:3000
  • Add your production domain
  1. CORS setting in your Next.js config file:
// next.config.js
module.exports = {
async headers() {
return [
{
source: '/:path*',
headers: [
{
key: 'Access-Control-Allow-Origin',
value: '*'
}
]
}
]
}
}

I recommend you to try the first of these solutions (removing the integrity property). If this does not work, you can follow the other steps in order.

If the error persists, check the following:

  1. Is the correct domain registered in the Kakao Developers Console?
  2. Is your JavaScript SDK key correct?
  3. Does your Next.js project have CORS middleware?