外部サービスのREST API がCORSエラーで叩けない

Question

前提・実現したいこと

htmlのボタンを押して、Microsoft Azure apiをローカルから叩きたいのですがCORSで引っかかってしまい叩けません。

発生している問題・エラーメッセージ

よくあるCORSのエラーです。不思議なのはStatus 200のレスポンス（捕捉に記載)も返ってきているというところです。

1.Access to fetch at 'https://login.microsoftonline.com/example.com/oauth2/token' from origin 'http://127.0.0.1:5500' 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.

2.POST https://login.microsoftonline.com/example.onmicrosoft.com/oauth2/token net::ERR_FAILED

該当のソースコード

function AuthButton(){

         const data = {
                //body要素：シークレットIDなどが入っているため割愛
            }

            const param = {
                method:'POST',
                headers:{
                    'Content-Type':'application/x-www-form-urlencoded',
                    'Keep-Alive':true,
                    'Access-Control-Allow-Origin':'http://127.0.0.1:5500',　//ローカルのオリジン Referrer PolicyはHTMLでReferrer Policy: unsafe-urlを宣言
                    'Access-Control-Allow-Methods':'POST, PUT, DELETE, PATCH, GET'　//ここはいるのか？と疑問
                },
                body:JSON.stringify(data)
            };
            fetch('https://login.microsoftonline.com/example.com/oauth2/token',param) //叩きたいAPI エラー発生個所
           
            .then((res)=>{
                const data = res.access_token;
                TokenDisplay.append(data)  //レスポンスを表示させるとこ
            }).catch(function(error){
                TokenDisplay.append(error)
            })
        }

補足情報（FW/ツールのバージョンなど）

CORSエラーが返ってきている方のステータス

Request URL: https://login.microsoftonline.com/example.onmicrosoft.com/oauth2/token
Referrer Policy: unsafe-url
Cache-Control: no-store, no-cache
Content-Length: 503
Content-Type: application/json; charset=utf-8
Date: Tue, 30 Mar 2021 06:09:53 GMT
Expires: -1
P3P: CP="DSP CUR OTPi IND OTRi ONL FIN"
Pragma: no-cache
Referrer-Policy: strict-origin-when-cross-origin
Set-Cookie: fpc=AkCnwEafv2ZLoUacz7rHfUo; expires=Thu, 29-Apr-2021 06:09:54 GMT; path=/; secure; HttpOnly; SameSite=None
Set-Cookie: x-ms-gateway-slice=estsfd; path=/; secure; samesite=none; httponly
Set-Cookie: stsservicecookie=estsfd; path=/; secure; samesite=none; httponly
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
x-ms-ests-server: 2.1.11562.10 - SEASLR1 ProdSlices
x-ms-request-id: 160c6c06-05a3-46d0-bad0-67d7bac37501
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Access-Control-Allow-Methods: POST, PUT, DELETE, PATCH
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 182
Content-Type: application/x-www-form-urlencoded
Host: login.microsoftonline.com
Origin: http://127.0.0.1:5500
Referer: http://127.0.0.1:5500/html/index.html
sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

何故か200番台が返ってきているところのステータス

Request URL: https://login.microsoftonline.com/example.onmicrosoft.com/oauth2/token
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: 40.126.37.5:443
Referrer Policy: unsafe-url
Access-Control-Allow-Headers: access-control-allow-methods,access-control-allow-origin
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Length,Content-Encoding
Cache-Control: no-store, no-cache
Content-Length: 0
Date: Tue, 30 Mar 2021 06:09:53 GMT
Expires: -1
P3P: CP="DSP CUR OTPi IND OTRi ONL FIN"
Pragma: no-cache
Referrer-Policy: strict-origin-when-cross-origin
Set-Cookie: fpc=AvlY01kt7qRGgN-FUjoBPEI; expires=Thu, 29-Apr-2021 06:09:54 GMT; path=/; secure; HttpOnly; SameSite=None
Set-Cookie: x-ms-gateway-slice=estsfd; path=/; secure; samesite=none; httponly
Set-Cookie: stsservicecookie=estsfd; path=/; secure; samesite=none; httponly
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
x-ms-ests-server: 2.1.11562.10 - KRSLR2 ProdSlices
x-ms-request-id: 3ea3c612-2ff7-4e69-ba48-e2ab5fab5000
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Access-Control-Request-Headers: access-control-allow-methods,access-control-allow-origin
Access-Control-Request-Method: POST
Connection: keep-alive
Host: login.microsoftonline.com
Origin: http://127.0.0.1:5500
Referer: http://127.0.0.1:5500/html/index.html
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

![]

当方Rest API 初心者ですので必要な情報ないかもしれません、その際はすぐ対応しますのでよろしくお願いします。

Answer 1

teratailでも何度も何度も同じ質問が出てる。
API=ブラウザのJSから利用するものと思い込んでる初心者が多いけど実際には利用できないAPIの方が多い。
CORSの前にこの当たり前の常識を覚えるのが先。

自分で書いてるようにブラウザのJSでは公開してはいけないコードも全部公開される。

const data = {
    //body要素：シークレットIDなどが入っているため割愛
}

公開できないIDなどを使うAPIはブラウザのJSからは利用できない。

ブラウザから利用できるのは「APIキーなし」「公開していいpublicキーを使うもの」「呼び出せるoriginを制限してるもの」など何らかの条件がある。

Comments

[OkukawaRyoki]

ご返信ありがとうございます。
なるほど、、、
公開できないIDなどを使うAPIはブラウザのJSからは利用できない。　＞＞この認識でとりあえず学習を進めます。
ありがとうございます。

Answer 2

プリフライトじゃないでしょうか？

プリフライトリクエスト | オリジン間リソース共有 (CORS) - HTTP | MDN

Comments

[OkukawaRyoki]

ステータスコード200で返ってきているものはプリフライトでした。ありがとうございます！