2017-12-05 10 views
0

他のドメインから外部APIからデータを取得する必要があります。 私はローカルホスト上runnedテストアプリケーションを使用して、私はエラーを取得:ユーザエージェント(クロム)のCORS要求をプログラムで許可する

Origin http://localhost is not allowed by Access-Control-Allow-Origin.

私はへのアクセスを取得しよう:https://api.coinmarketcap.com/v1/ticker/方法

を取得し、私は、検索の多くを行なったし、:

しかし、不幸にも、私のページロードでは単にAJAXリクエストだけで、そのAPIにアクセスできず、エラーになることはありません。

私の予測では、ユーザーエージェント(chrome)がどういうわけか自分のリクエストをブロックしているということです。 クロム拡張機能を使用できません。携帯電話から自分のウェブサイトにアクセスして、そのデスクトップ拡張機能を利用できないようにしたいからです。今、私の解決策は、 "プロキシ" であるために

は、そのAPIと流れがどのように見えるアクセスできるサーバーのNode.js:

FE

-- ASK BE -->

BE

-- ASK API -->

-- RESPONSE TO BE -->

BE

-- RESPONSE TO FE -->

FE SHOWS EVERYTHING

FE - フロントエンドを、BE - バックエンド(Node.jsのプロキシ)、API - 外部API

しかし、私はBEの不要なコードを避けたいです。たぶん、いくつかの解決策がありますか? 追加拡張子なしで外部ドメインに渡すことができるようにChromeに伝えるいくつかの魔法のようなヘッダがありますか?

+2

いいえ、フロントエンドでCORSを回避することはできません。 – Barmar

+0

私は、ブラウザがAccess-Control-Allow-Originヘッダなしであなたを許可しているとは思わない。 – vibhor1997a

答えて

0

jsonpを使用していて問題のサーバーがそれをサポートしていない限り、CORSルールをバイパスすることはできません。過去にそのティッカーを使って作業していたときは、あなたが明示しているように正確にバックエンドを構築しなければなりませんでした。

FE => BE => Ticker => BE => FE

0

ここで説明するようにさてあなたはその1つのきれいな方法を行うことができます - サーバーからの最初のページのロードにあなたの応答にヘッダーの値

Access-Control-Allow-Origin: *

を設定https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

を。

+0

Apiはnode.jsなどからアクセスできるのでヘッダーを設定しますが、FEサイトのクロムはそれをブロックします。 –

0

すべてのページでHTML5が使用されている場合は、Window.postMessageを試してみることができます。

もう1つの一般的な解決策は、プロキシサーバーを作成することです。

+0

アイデアを正しく理解していれば、メッセージが届かない場合にのみ投稿されます。 –

関連する問題