CROS PolicyでAPIからアクセスを弾かれる

Question

PHPでできたと思われるAPIにjs Ajaxでリクエストを投げているのですが、CROS Policyでブロックされたとエラーメッセージがコンソールに出ます。
Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response
サーバーサイド は別の方に担当していただいているのですが、いくら修正してもらっても解決に向かわず,,,
（Access-Control-Allow-Origin　の対応をいただいたり、withcredentialsの対応をいただいたようです）
もしかしてフロント側の私の処理ができていないのではないかと思っています。
つまり原因の切り分けが出来なくて困っています。

開発者ツールのNetworkで送っているリクエストやレスポンスを見ることはできるのですが、その中のどこをみて、どこがおかしいと判断してがわかりません、ぼんやりした質問ですが、これが原因なんです、皆さんにどの部分を見せれば判断してもらえるのかすらわかっていないのです！！！
どうかご助力を....

追記ーーーーーーーーーーーーーーーーーーーー

なんかエラーが違うと思ってもう一度コンソールで同じコードを書いたら、またエラーが変わった？

今は↑のエラーで安定（？）しています

Comments

[hentaiman]

> サーバーサイド は別の方に担当していただいているのですが、いくら修正してもらっても解決に向かわず,,,

普通はサーバー側担当がjavascript側のテスト用プログラムも作って動作確認します。
クロスオリジンで動作確認済みでフロント側（質問者）が上手くいかないのならフロント側の責任ですが、そうでないならサーバーサイドの責任です。

> （Access-Control-Allow-Origin　の対応をいただいたり、withcredentialsの対応をいただいたようです）

何も考えずにネットに書いてる二次情報だけを見ていい加減に処理を組んだところで対応出来ないのは当然です
が、ネットの二次情報を複数確認して正しく理解出来ていれば対応出来る程には簡単なものです。
サーバーサイド担当に技術力が足りない以上はサーバーサイドの責任として技術者を雇うしかないでしょう

[Yusuke_m25]

＞普通はサーバー側担当がjavascript側のテスト用プログラムも作って動作確認します。
クロスオリジンで動作確認済みでフロント側（質問者）が上手くいかないのならフロント側の責任

「直したので試してください」的な感じで何往復もしています。

できれば表から原因を見つけ出して、助言じゃないですけど 前進できる何かしらを見つけたいのですが　そんなことはできないと言うことですね...
雇われてんのは私の方なんですよね,,,困ったちゃん...

[hentaiman]

じゃあ動作確認に使用されたであろうjavascriptくださいって言えば？ゴミ技術者じゃなければ普通はプログラム作って動作テストしてるはずだから。

> Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

まともな技術者ならこの内容送れば対応出来ますよ、送ってみてはいかがですか？

[Yusuke_m25]

hentaiman さん、この件いろいろなご意見いただきましてありがとうございました。
この件、やっぱりフロント側のコーディングに問題があったようで、
axiosでAPIアクセスすることができました

axios({
url:'samplesample',
method: 'get',
responseType: 'json',
headers: {
'Content-Type': 'application/json',
'withCredidentials':true
}
})

jQuery.ajax({
url:'samplesample',
type: 'get',
ContentType: 'application/json;charset=utf-8'
}.success~~
)
私はずっとjQueryのajaxでAPI接続を試みていたのですがうまくいかず、、、
上記２つのコードをみて 特に後者を見て hentaimanさんは「ああ、こりゃ取れなくて当たり前だよ」って思う部分ありますか？
仕組みとしては同じことをしていると思っているのですが,,,

[hentaiman]

> 仕組みとしては同じことをしていると思っているのですが,,,

withCredentialsの有無はあれどもどちらのコードも必ずプリフライトリクエストの発生するリクエストを飛ばしており、原因は既に述べた通り下記です。

> > Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

そしてこの対応を出来るのはサーバー側なので、サーバー担当がこれの対応をしていなかった事が原因です。現在解消されているのはサーバー側が対応したから以外にあり得ません。

という事で自分の結論としては、見栄張ったサーバーサイドのクソプログラマーの責任逃れ（フロントのせいにする為の）の嘘発言に騙されてるのでしょう。

[Yusuke_m25]

それが、jQueryの方にだけエラーが出ているんですよ...
jQueryにxhrFieldsでCredentialsの設定をしてもエラーです。
もし何かピンときたら教えてください????‍♂️

[hentaiman]

だとしたらエラー内容は本当に

> Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

なのか？という疑いに変わってきます

[Yusuke_m25]

エラーの画像を貼ったのですが、もしかしてこれは一回、ちゃんとに帰ってきているのでしょうか？
{readyState~~~ はレスポンスですか？
このオブジェクトの中のstatusTextはerrorになっています...

hentaimanさんの疑いのエラー自体は出ているのですがもしかしてそこは本質ではなかってのでしょうか？

[hentaiman]

一回ちゃんと帰って来ているの意味が分からないけど、エラー内容違うじゃんっていうツッコミに変わります
URL間違えてたりとかしませんか？実際の通信内容確認しながらテストしてみてはどうでしょうか

Answer 1

このエラーメッセージの状況であれば、プリフライトリクエストが飛んでいるはずで、その応答として、以下をAPI側で返す必要があります。

Access-Control-Allow-Headers: Content-Type

Comments

[Yusuke_m25]

API側ではこういった対応は全てされていたようでした...フロントのコーディングに問題があったようなのですが、ockeghemさんは上記コメント欄にあるjsのjQuery.ajaxのコーディングを見て何か納得の部分ございますか！？

[ockeghem]

エラーメッセージには、プリフライトリクエストで許可されていないとはっきり明記されているので、「API側ではこういった対応は全てされていたようでした」はあり得ないと思います。納得いかないのであれば、APIの返すレスポンスを示してください。

[Yusuke_m25]

axiosではレスポンスを受け取れたんです...。
でもjQuery.ajaxでは引き続きエラーが出て、

APIの返すレスポンスは”Faild to load response data”ですね...
ちなみに Chromeコンソールの画面からjQuery.ajaxでリクエストすると2回りクエストが飛んでいるようで（Chromeの開発者ツール＞Network タブでrequestが2個増える。両方レスポンスはFaild to load〜〜）
一個めはHeaderタブ＞General に RequestHeaderにか記載がなく、
2個めはHeaderタブ＞General　にResponse Headersl　と Request Headersがあります。Status Codeは200 OKと書いてあります....
何が原因なのか理解したいと思っています。”APIの返すレスポンスを示してください。”とのことでしたが↑が適した回答でなければ申し訳ございません。もしこれが原因かな？的なのがあったら教えてください。それをきっかけにもっと深く調べてみます。

[ockeghem]

添付された画像だと、 Access-Control-Allow-Originヘッダがないと読めますね。これがないとJavaScriptからアクセスできないはずです。
レスポンスを添付…というのは、下記例のようなテキストを貼ってくださいということです。Google Chromeの開発ツールの「ネットワーク」タブで取得できます。

HTTP/1.1 200 OK
Server: nginx/1.10.3
Date: Sat, 16 Jan 2021 08:14:31 GMT
Content-Type: text/plain;charset=UTF-8
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: http://example.jp
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 1728000
X-UA-Compatible: IE=edge

[Yusuke_m25]

ockeghemさん、
レスポンスを添付いたしました。写真でごめんなさい、(さらに 知識が無いため、とりあえず色々黒塗りしました...。必要な情報があれば調べた上で安全か判断し追加で提示いたします????‍♂️)

このレスポンスの前にいっこ別のリクエストも表示されて、そちらにはレスポンスは表示されておらず、
▼Request Headers
　⚠️Provisional headers are shown
　Accept:*/*
Content-Type: application/json;charset=utf-8
Refere: 自分のドメイn
User-Agent:Mozilla~~~~~~~~~~~~

　と記載があります。

何かわかりますか...？

[ockeghem]

さしあたり、Access-Control-Allow-Headers: Content-Type がないためエラーになっている…という最初に指摘に戻りました

[ockeghem]

ちなみに、Access-Control-Allow-Headers: withcredentials は無意味なので削除しましょう

[Yusuke_m25]

ではなぜaxiosではレスポンスが返ってくるのでしょう...？
ーーーーーーーーーーーーーーーーー
axiosで帰ってくるレスポンスと、j queryで綺麗に帰ってこないレスポンスの中身を見比べました。
違いが一点、
axiosのレスポンスには　Accept : application/json , text/plain , */*
jQueryのレスポンスには　Accept : */*
の差がありました。

jQueryの記述を
jQuery.ajax({
url:'samplesample',
type: 'get',
}.success~~
)
のように、ContentTypeの部分を消しました。そしたらデータが入ったレスポンスが返ってきて、エラーが消えました。

”Access-Control-Allow-Headers: Content-Type がないためエラーになっている”と言うのは
リクエストでContent-Typeを送っているが、サーバー側はそんなもの受け取ることを許可していないと言う意味なのでしょうか？

いや、でもaxiosのリクエストにも
headers:{
'Content-Type': 'application/json',
}
と、ContentTypeのヘッダーを含めていますし,,,

上記の状況を見て何かこう言うことじゃ無いかな的なのがあったら是非教えてください????
また明日、自分でも根本からリクエストやらHeadersの仕組みを深堀しようと思います。

[hentaiman]

> いや、でもaxiosのリクエストにも
> headers:{
> 'Content-Type': 'application/json',
> }
他人が作ったライブラリを利用して自身が書いたコードを見て判断するのではなくリクエストヘッダーを見て判断しましょう。

[Yusuke_m25]

hentaimanさん！忍耐強くアドバイスをくださって本当に助かります！！！！

見比べました！
バックエンドの方がAPI接続確認したaxios
僕がいつまでもAPIからデータ取れなかったjQuery①
jQuery①からcontentTypeの設定を削除したら接続できたjQuery②

接続確認でなかったjQuery①のみのRequest Headerに

Access-Control-Request-Headers: content-type
Access-Control-Request-Method:GET

と言う記述がありました。

とどのつまり、皆様が最初から言われていた、サーバー側で
Access-Control-Allow-Headers: Content-Type 　を書くと言うのが　回答としてパーフェクトで

ツッコミとして、そもそもContent-Typeをリクエストにくっつけて送る必要があったのかって話になるのかなと思っています。
仕様書にそう書いてあったのをそのままつけたのが問題で
・ContentType: 'application/json;charset=utf-8'とはどう言う意味の記載なのか。
さらに今ある疑問として
・axiosのheaders:{'Content-Type': 'application/json',}と言う記述は何の役に立っているのか
ってところを理解する必要があると思いました。

お二方、本当に色々とありがとうございました。
引き続き調査を進めますが、もし何か補足での説明や私の勘違いしている部分あったら追記いただけますとめちゃくちゃ嬉しいですし、ためになります！！

[hentaiman]

たまたまプリフライトリクエストが発生しないリクエストになっているだけで、仕様書に沿ったリクエストではなくなってます。
そして仕様書に沿ったリクエストにするならプリフライトリクエストは必ず発生し、その対応が出来ていないサーバー側が原因のエラーなのでやはりサーバー担当の技術不足です。
ついでに言うと恐らく

> とどのつまり、皆様が最初から言われていた、サーバー側で
> Access-Control-Allow-Headers: Content-Type 　を書くと言うのが　回答としてパーフェクトで

だけでは対応不足でしょう。
と、Yusuke_m25さんの誤解を解く程度のアドバイスのみに留めておきます。

今回の問題はどれもこれも質問者に問題があるわけではなく、全てサーバー担当の能力不足ですね。