質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

2回答

7339閲覧

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

OkukawaRyoki

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2021/03/30 06:31

編集2021/03/30 06:32

前提・実現したいこと

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

該当のソースコード

JavaScript

1function AuthButton(){ 2 3 const data = { 4 //body要素:シークレットIDなどが入っているため割愛 5 } 6 7 const param = { 8 method:'POST', 9 headers:{ 10 'Content-Type':'application/x-www-form-urlencoded', 11 'Keep-Alive':true, 12 'Access-Control-Allow-Origin':'http://127.0.0.1:5500', //ローカルのオリジン Referrer PolicyはHTMLでReferrer Policy: unsafe-urlを宣言 13 'Access-Control-Allow-Methods':'POST, PUT, DELETE, PATCH, GET' //ここはいるのか?と疑問 14 }, 15 body:JSON.stringify(data) 16 }; 17 fetch('https://login.microsoftonline.com/example.com/oauth2/token',param) //叩きたいAPI エラー発生個所 18 19 .then((res)=>{ 20 const data = res.access_token; 21 TokenDisplay.append(data) //レスポンスを表示させるとこ 22 }).catch(function(error){ 23 TokenDisplay.append(error) 24 }) 25 }

補足情報(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 初心者ですので必要な情報ないかもしれません、その際はすぐ対応しますのでよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

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

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

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

投稿2021/03/30 06:56

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

OkukawaRyoki

2021/03/30 07:04

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

0

投稿2021/03/30 07:04

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

OkukawaRyoki

2021/03/31 00:20

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問