

フロントエンド側で国税庁が提供する法人番号APIを使用し、企業情報の取得を試みたところ、ブラウザのコンソールにて以下のcorsエラーが発生しました。  
こちらの解決策をお伺いしたく存じます。

[code]

    Access to XMLHttpRequest at '[https://api.houjin-bangou.nta.go.jp/4/num?id=hogehoge&number=hogehoge&type=12&history=0](https://api.houjin-bangou.nta.go.jp/4/num?id=hogehoge&number=hogehoge&type=12&history=0)' from origin '[http://localhost:3000](http://localhost:3000/)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    
    GET https://api.houjin-bangou.nta.go.jp/4/num?id=hogehoge&number=hogehoge&type=12&history=0 net::ERR_FAILED 200
    
[/code]

環境  
・OS: macOS 12.3.1  
・フロントエンド: React,TypeScript  
・バックエンド: Amplify  
・ブラウザ: Chrome 106.0.5249.119 (Official Build) (arm64)

試したこと  
・package.jsonのproxy設定  
・フロント側のリクエストヘッダにAccess-Control-Allow-Origin:*を設定

国税庁の [よくある質問](https://www.houjin-
bangou.nta.go.jp/shitsumon/shosai.html?selQaId=00146)
によると、クロスドメインによるリクエストについて許可する予定は無いとのことなのですが、解決策はありますでしょうか？

何卒宜しくお願いいたします。

[code]

    axios
            .get(
              `https://api.houjin-bangou.nta.go.jp/4/num?id=${process.env.REACT_APP_CORPORATE_API_NUMBER}&number=${companyCode}&type=12&history=0`
            )
            .then((res) => {
              console.log(res);
            })
            .catch((error) => {
              console.log(error);
            });
    
[/code]


CC BY-SA 4.0
2022-10-27T04:41:45.870
91852
2022-10-28T14:20:18.513
2022-10-27T05:18:41.997
3060
55065
question
aws reactjs cors
フロントエンドから法人番号APIを使用した際のcorsエラーについて


ブラウザ側でAPIコールすると CORS 対応が必要になるため、ブラウザ側から API をコールするのではなく、例えば、React=>Lambda=>API
という形式に落とし込むことで実現できるかと思います。


CC BY-SA 4.0
2022-10-28T14:20:18.513
91882
2022-10-28T14:20:18.513
16793
91852
answer