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

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

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

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

API

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

Q&A

解決済

1回答

606閲覧

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

Yusuke_m25

総合スコア74

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

API

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

0グッド

1クリップ

投稿2021/01/15 05:59

編集2021/01/16 08:41

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で送っているリクエストやレスポンスを見ることはできるのですが、その中のどこをみて、どこがおかしいと判断してがわかりません、ぼんやりした質問ですが、これが原因なんです、皆さんにどの部分を見せれば判断してもらえるのかすらわかっていないのです!!!
どうかご助力を....

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

イメージ説明

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

今は↑のエラーで安定(?)しています

イメージ説明

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

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

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

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

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

hentaiman

2021/01/15 06:16

> サーバーサイド は別の方に担当していただいているのですが、いくら修正してもらっても解決に向かわず,,, 普通はサーバー側担当がjavascript側のテスト用プログラムも作って動作確認します。 クロスオリジンで動作確認済みでフロント側(質問者)が上手くいかないのならフロント側の責任ですが、そうでないならサーバーサイドの責任です。 > (Access-Control-Allow-Origin の対応をいただいたり、withcredentialsの対応をいただいたようです) 何も考えずにネットに書いてる二次情報だけを見ていい加減に処理を組んだところで対応出来ないのは当然です が、ネットの二次情報を複数確認して正しく理解出来ていれば対応出来る程には簡単なものです。 サーバーサイド担当に技術力が足りない以上はサーバーサイドの責任として技術者を雇うしかないでしょう
Yusuke_m25

2021/01/15 06:25 編集

>普通はサーバー側担当がjavascript側のテスト用プログラムも作って動作確認します。 クロスオリジンで動作確認済みでフロント側(質問者)が上手くいかないのならフロント側の責任 「直したので試してください」的な感じで何往復もしています。 できれば表から原因を見つけ出して、助言じゃないですけど 前進できる何かしらを見つけたいのですが そんなことはできないと言うことですね... 雇われてんのは私の方なんですよね,,,困ったちゃん...
hentaiman

2021/01/15 06:33 編集

じゃあ動作確認に使用されたであろうjavascriptくださいって言えば?ゴミ技術者じゃなければ普通はプログラム作って動作テストしてるはずだから。 > Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response まともな技術者ならこの内容送れば対応出来ますよ、送ってみてはいかがですか?
Yusuke_m25

2021/01/16 05:52

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接続を試みていたのですがうまくいかず、、、 上記2つのコードをみて 特に後者を見て hentaimanさんは「ああ、こりゃ取れなくて当たり前だよ」って思う部分ありますか? 仕組みとしては同じことをしていると思っているのですが,,,
hentaiman

2021/01/16 06:41

> 仕組みとしては同じことをしていると思っているのですが,,, withCredentialsの有無はあれどもどちらのコードも必ずプリフライトリクエストの発生するリクエストを飛ばしており、原因は既に述べた通り下記です。 > > Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response そしてこの対応を出来るのはサーバー側なので、サーバー担当がこれの対応をしていなかった事が原因です。現在解消されているのはサーバー側が対応したから以外にあり得ません。 という事で自分の結論としては、見栄張ったサーバーサイドのクソプログラマーの責任逃れ(フロントのせいにする為の)の嘘発言に騙されてるのでしょう。
Yusuke_m25

2021/01/16 07:08

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

2021/01/16 07:12

だとしたらエラー内容は本当に > Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response なのか?という疑いに変わってきます
Yusuke_m25

2021/01/16 07:37

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

2021/01/16 08:43

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

回答1

0

ベストアンサー

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

Access-Control-Allow-Headers: Content-Type

投稿2021/01/15 06:57

編集2021/01/15 06:57
ockeghem

総合スコア11701

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

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

Yusuke_m25

2021/01/16 06:00

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

2021/01/16 06:18

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

2021/01/16 07:20

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

2021/01/16 08:15

添付された画像だと、 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

2021/01/16 08:48

ockeghemさん、 レスポンスを添付いたしました。写真でごめんなさい、(さらに 知識が無いため、とりあえず色々黒塗りしました...。必要な情報があれば調べた上で安全か判断し追加で提示いたします????‍♂️) このレスポンスの前にいっこ別のリクエストも表示されて、そちらにはレスポンスは表示されておらず、 ▼Request Headers  ⚠️Provisional headers are shown  Accept:*/* Content-Type: application/json;charset=utf-8 Refere: 自分のドメイn User-Agent:Mozilla~~~~~~~~~~~~  と記載があります。 何かわかりますか...?
ockeghem

2021/01/16 09:25

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

2021/01/16 09:32

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

2021/01/17 03:23 編集

ではなぜ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

2021/01/16 19:02

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

2021/01/17 04:31

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

2021/01/17 05:02

たまたまプリフライトリクエストが発生しないリクエストになっているだけで、仕様書に沿ったリクエストではなくなってます。 そして仕様書に沿ったリクエストにするならプリフライトリクエストは必ず発生し、その対応が出来ていないサーバー側が原因のエラーなのでやはりサーバー担当の技術不足です。 ついでに言うと恐らく > とどのつまり、皆様が最初から言われていた、サーバー側で > Access-Control-Allow-Headers: Content-Type  を書くと言うのが 回答としてパーフェクトで だけでは対応不足でしょう。 と、Yusuke_m25さんの誤解を解く程度のアドバイスのみに留めておきます。 今回の問題はどれもこれも質問者に問題があるわけではなく、全てサーバー担当の能力不足ですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問