[JavaScript]fetchAPIを使ってConnpassAPIにアクセスしたいが、できない

Question

JavascriptでAPIを取得したいと思っています。fetchAPIを使い、イベント検索サイトConnpassが提供しているデータを取得したいです。しかし、アクセスしようとすると以下のようなエラーメッセージに遭遇してしまいます。

Access to fetch at 'https://connpass.com/api/v1/event/?keyword=swift' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.

該当コード

componentDidMount() {
        console.log(this.props.match.params.lang)
        const url = new URL('https://connpass.com/api/v1/event/');
        url.searchParams.append('keyword', this.props.match.params.lang);
        console.log(url.toString()); /*https://connpass.com/api/v1/event/?keyword=swift*/
        fetch(url, {
            mode: 'cors',
        }).then(res => {
            return res.json();
        }).then(json => {
            console.log(json);
        })
    }

mode: corsに設定しています。

環境

ブラウザはChrome
JavaScriptフレームワークはReactJSです。

試したこと

Connpassのrobots.txtを見てみました。

User-agent: *
Crawl-delay: 5
Allow: /
Disallow: /series/optout/
Disallow: /account/

特段制限されているようには思えません。

エラ〜メッセージを出さずに取得する方法を教えてください。

Answer 1

API側サーバでAccess-Control-Allow-Originが設定されていなければ取得できないので、サーバ側言語を使って中継するなりしましょう。

【オリジン間リソース共有 (CORS) - HTTP | MDN】
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

【Access-Control-Allow-Origin - HTTP | MDN】
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

Comments

[youj_biginner]

なるほど。ReactからGoにリクエストを飛ばす>GoがConnpassAPIからデータを取得し、JSONに整形>GoからReactにJSONデータを送信>Reactが受信、というイメージでしょうか？

[kei344]

そうですね。

[youj_biginner]

ありがとうございました。