web-dev-qa-db-ja.com

Axios-「Access-Control-Allow-Origin」ヘッダーがありません

ここに何かがありません。 API呼び出しを機能させるのに苦労していました。次に、以下のようにURLを分割し、文字通り一度だけ動作します。その後、再び機能しなくなります。私は何かを変えなかったことを誓います。

AXIOSでどのように対処しますか？

エラーメッセージ：

XMLHttpRequestをロードできません http://magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/?spot_id=228 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin ' http：// localhost：808 'はアクセスを許可されていません。

import axios from 'axios';

const ROOT_URL = `magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/`;

export const FETCH_WEATHER = 'FETCH_WEATHER';

export function fetchWeather() {
    const url = `http://${ROOT_URL}?spot_id=228`;
    const request = axios.get(url);

    return {
        type: FETCH_WEATHER,
        payload: request
    };
}

この変更されたGETでも試してみましたが、利用できませんでした

axios({
  url: url ,
  headers: {"Access-Control-Allow-Origin": "*"},
});
corsaxios
8
morne

ここを見て：

https://www.npmjs.com/package/magicseaweed

一番下に向かって、なぜ彼らのAPIラッパーがブラウザーで機能しないのかがわかります。これは、ブラウザーでAjax呼び出しを行えないのと同じ理由です。

FAQ

Browserifyでブラウザーでこのモジュールを使用できますか？

理論上は可能ですが、Magicseaweed APIは現在、ブラウザリクエストでAccess-Control-Allow-Originヘッダーを送信していません（cURLを介してリクエストをリプレイすると、ヘッダーが送信されます）

したがって、APIがその動作を変更する場合、このモジュールはbrowserifyで動作します。

独自のプロキシサーバーを立ち上げるか、インターネットで利用可能な無料のプロキシサーバーのいずれかを使用できます。

https://developer.yahoo.com/yql/

https://crossorigin.me/

1
Robert Moskal