Vue クロスオリジンのエラーを解消する方法

Question

前提・実現したいこと

Vueでプロジェクトを作成していて、fetchを使って他のサイトのプレーンテキストを所得したいと考えています。

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

下記のようにしてあるURLにアクセスしようとしたところ

fetch(url).then(function(response) {
  return response.text();
}).then(function(text) {
  console.log(text)
});

このようなエラーが出てきました

Access to fetch at 'https:/...' from origin 'http://localhost:50776' 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.

モードをcorsにして、headerに'Access-Control-Allow-Origin'が必要と書いてある記事があったので下記のようなコードにしたのですが引き続き同じエラーが出てしまいます

fetch(url, {
 mode: "cors",
 headers: {
  'Access-Control-Allow-Origin': 'https', // '*' でも試しました
  'Access-Control-Allow-Headers': 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'
 },
}).then(function(response) {
  return response.text();
}).then(function(text) {
  console.log(text)
});

corsとfetchに関して理解が足らず解決できてないのですが、どこに問題がありそうか教えていただけますと幸いです。
よろしくお願いいたします。

Answer 1

CORS回避は昔は「Google Feed API」や「YQL」など盛んに行われていましたが
そもそもが不正な処理なのでいまは主要なサービスとしては
提供されていないかもしれませんね

Comments

[yambejp]

どうしてもというなら自前のサーバーサイドプログラムでやるのが妥当ですが
そもそも他人ソースを無条件に参照するというのは考え方がおかしいのかもしれません

[gnx_vw903]

ご回答ありがとうございます
やはりそうなんですね、、、
URLから「タイトル」「og:image」を取得したかったのですが、fetchではなく他の方法で探してみます

Answer 2

、headerに'Access-Control-Allow-Origin'が必要

これは、送信元のサーバで必要な操作です。JavaScript側でできることはありません。

Comments

[gnx_vw903]

なるほど、そうしますとVueから他のURLの情報を取得できないことになりますでしょうか？

[maisumakun]

当該サーバの設定を変更してください。

[gnx_vw903]

当該サーバとは、この場合ですとVueを立ち上げてる'http://localhost:50776'になりますでしょうか？

axiosでの設定方法はよくあるのですが、fetchの場合の設定はあまり見当たらなかったのでもう少し探してみます

[maisumakun]

> この場合ですとVueを立ち上げてる'http://localhost:50776'になりますでしょうか？

違います。アクセス先の「https:/...」のほうです。

[gnx_vw903]

こちらアクセス先の「https:/...」は特定のURLではなく、いろんなURLから（qiitaとかnoteとか）のテキストデータを取得したいなと考えています。
この場合だと、fetchではアクセスできないってことになりそうでしょうか？

[maisumakun]

はい、（サーバサイドがCORSアクセスを拒否している場合）直接にはアクセスできません。

[gnx_vw903]

承知しました、詳細まで教えていただきありがとうございます！！