質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

625閲覧

React Node.js/CommonJSのモジュールを使用する方法

fia

総合スコア57

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/09/27 08:25

編集2020/09/27 08:27

前提・実現したいこと

ReactからTwitterAPIを使用してタイムライン情報を取得したいのですが、
CORS認証で引っかかっているようです。

Reactを使用せずにTypeScript単体でコマンド上では動いたのですが、
そのときはエラー回避のためにtsconfig.jsonで"module": "commonjs"を使用していました。
Reactでは"module": "esnext"になっているため共存の仕方がわかりません。

使用しているライブラリは以下のものを使用しています。
twitter
@types/twitter

発生している問題・エラーメッセージ

Access to fetch at 'https://api.twitter.com/1.1/statuses/home_timeline.json?count=50' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

該当のソースコード(.tsx)

TypeScript

1useEffect(() => { 2 const load = async (): Promise<void> => { 3 setIsLoading(true); 4 5 6 try { 7 await client.get('statuses/home_timeline', params, function(error, tweetsData, response) { 8 if (!error) { 9 console.log(tweetsData); 10 setDatas(tweetsData); 11 12 } 13 }) 14 15 } catch (err) { 16 throw new Error(`error`); 17 } finally { 18 setIsLoading(false); 19 } 20 }; 21 22 void load(); 23 }, []);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

そのときはエラー回避のためにtsconfig.jsonで"module": "commonjs"を使用していました。

Reactでは"module": "esnext"になっているため共存の仕方がわかりません。

そういう問題ではありません。「非公開のキーを利用する」そして「CORS非対応」のTwitter APIは、ブラウザ内からは直接に利用できません

投稿2020/09/27 08:30

maisumakun

総合スコア146018

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問