[1 stProject]緑茶ロックDetail-Kakao Link
kakaoSharePreference = () => {
const { description, main_image_url, name } = this.state.product;
const URL = `http://localhost:3000/detail/${this.props.match.params.id}`;
dotenv.config();
window.Kakao.init('키');
window.Kakao.Link.createDefaultButton({
container: '#kakao-link-btn',
objectType: 'feed',
content: {
title: `${name}`,
description: `${description}`,
imageUrl: `${main_image_url}`,
link: {
webUrl: `${URL}`,
},
},
buttons: [
{
title: '녹차록에서 확인하기',
link: {
mobileWebUrl: `${URL}`,
webUrl: `${URL}`,
},
},
],
});
};window.Kakao.init('키')1. .Envファイル
2. .gitignoreでenvの追加
3. .envに鍵を追加する
REACT_APP_KAKAO_LINK_KEY=28...4. detail.jsxに適用
window.Kakao.init('키'); -> window.Kakao.init(process.env.REACT_APP_KAKAO_LINK_KEY);
Cross-originとは、あるリソースを使用する場合、そのリソースがそのソース(ドメイン、ポートなど)と異なる場合に発生することを意味します.
FetchとXMLfttpRequestとfetchは同じソースポリシーに従います.
つまり、このAPIを使用するWebアプリケーションは、自分のソースと同じリソースしかロードできません.他のソースにアクセスするには、正しい応答を返さなければアクセスできません.
解決の試み1
Kakao開発者プラットフォームにドメインを入力
まだエラーが発生しています.長いこと悩んだあげく、指導者の助けでヒントを得た.
initのパラメータで入力された
process.env.REACT_APP_KAKAO_LINK_KEYをチェックした結果、undefinedが出力されました!解決を試みる2
環境変数の登録
私の端末からエクスポートします(この方法はvscodeを開くたびに実行する必要があります).
export REACT_APP_KAKAO_LINK_KEY='키'dotnvライブラリを対応するjsxファイルにインポート
dotnvでは、環境変数をファイルに保存できます.
import dotenv from 'dotenv';
...
dotenv.config();
window.Kakao.init(process.env.REACT_APP_KAKAO_LINK_KEY);undefinedは表示されず、正しいキー値を入力して操作します!
Reference
この問題について([1 stProject]緑茶ロックDetail-Kakao Link), 我々は、より多くの情報をここで見つけました https://velog.io/@silviaoh/녹차록-Detail-Kakao-Linkテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol