Cors errors when using the corporate number API from the front end

When I tried to obtain corporate information using the corporate number API provided by the National Tax Service on the front end side, the following cors error occurred on the browser console.
I'd like to know how to solve this problem.

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_FAILED200

Environment
·OS: macOS 12.3.1
·Front end: React, TypeScript
·Backend: Amplify
·Browser: Chrome 106.0.5249.119 (Official Build) (arm64)

Tried
·Package.json proxy setting
·Set Access-Control-Allow-Origin:* in the request header on the front side

According to the National Tax Service's Frequently asked question, there is no plan to allow cross-domain requests, is there a solution?

Thank you for your cooperation.

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);
        });

aws reactjs cors

2022-10-29 00:01

1 Answers

If you make an API call on the browser side, CORS support is required, so instead of calling the API from the browser side, for example, you can drop it to the format React=>Lambda=>API.

2022-10-29 00:01

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656