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

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

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

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

CORS

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

API

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

解決済

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

OkukawaRyoki
OkukawaRyoki

総合スコア16

JavaScript

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

CORS

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

API

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

2回答

0評価

0クリップ

2756閲覧

投稿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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

CORS

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

API

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