サーバーを立てずに画像付きツイートがしたい

やりたいこと

フロントエンドのみでtwitterに画像付きツイートをしたいです。

現状

npm install twitter のうえ、以下のようなプログラムを書きましたが、

javascript
1      const Twitter = require('twitter')
2      const config = require('../assets/config.js')
3      console.log(config)
4      const client = new Twitter({
5        consumer_key: config.consumer_key,
6        consumer_secret: config.consumer_secret,
7        access_token_key: config.access_token_key,
8        access_token_secret: config.access_token_secret
9      })
10      client.options.request_options.headers['Access-Control-Allow-Origin'] = '*' //追加
11      console.log(client)
12      const message = 'Message!';
13      (async () => {
14        const media = await client.post('media/upload', {media_data: this.image_data})
15        const status = {
16          status: message,
17          media_ids: media.media_id_string
18        }
19        const response = await client.post('statuses/update', status)
20        console.log(response)
21      })()

以下のエラーが発生し、投稿できません。

Access to fetch at 'https://upload.twitter.com/1.1/media/upload.json' from origin 'http://localhost:8080' 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.

キーやトークンの設定は正しくできていることが確認済みです。
「Access-Control-Allow-Origin」が存在しないというエラーだとみて、自分で追加してみましたがダメでした。追加場所が間違っているのでしょうか？

フロントエンドのみで投稿するのは不可能なのでしょうか？pythonやrubyでサーバーを立てなくてはいけないのでしょうか？

追記

OAuth認証のときと勘違いしていました。そうですよね。ローカルからtwitterは良くとも、twitterからローカルは無理がありますよね。

ならばと思い、Netlifyにデプロイし、https://appname.netlify.com/をtwitterのcallbackに登録しました。しかし、同様のエラーが発生したままです。

引き続きよろしくお願いいたします。

行動規範の内容に同意します

回答3件

ブラウザからでは相手サーバーが許可してない限り絶対に不可能。
こんな仕組みが存在するのはもちろん悪用できるから。

ブラウザでなければいいのでこの場合はnodeで実行すればいいだけでは。

投稿2018/12/16 09:39

kawax

総合スコア10377

退会済みユーザー

2018/12/16 13:54

nodeで実行するとは？

行動規範の内容に同意します

google翻訳
原点 'http：// localhost：8080'から 'https://upload.twitter.com/1.1/media/upload.json'でフェッチするアクセスがCORSポリシーによってブロックされました：プリフライト要求への応答でアクセスが許可されません制御チェック：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。不透明な応答が必要な場合は、要求のモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。

ツイッターのサーバにいくらlocalhostからデータを取れ、と言ってもそれは無理な話でしょう
ツイッターのサーバからアクセスできるURLを指定してあげましょう

投稿2018/12/16 08:42