ajaxクロスオリジンエラーがデータの内容（文字数）によって起きる

謎の現象がどうしてもわからないので、詳しい人助けてください。

###環境

サーバーＡにＷｅｂコンテンツがあります。（HTML/JS）
別のサーバーＢにWeb APIがあります。（PHP）
２つのサーバーとも私が開発しています。
サーバーＡのWebコンテンツから、サーバーＢのAPIに対してajax通信をしています。

###起きていること（解決したいこと）

基本的にクロスドメインは突破して通信は成功して、各種通信をしています。
まったく同じファイル内からのajax通信で、クロスドメインエラーが発生しました。

Access to XMLHttpRequest at 'https://xxx.xxx/api' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

###問題の切り分け
以下のようなコードで通信しています。

js
1	$.ajax({
2		url:apiURL,
3		type:'POST',
4		dataType: 'json',
5		data:DATA,
6		cache: false,
7		timeout: 10000
8	})
9	// Ajaxリクエストが成功した時発動
10	.done( function(data) {
11		call_api_succeed(data);
12	})
13	// Ajaxリクエストが失敗した時発動
14	.fail( function(data) {
15		call_api_failed(data);
16	})
17	// Ajaxリクエストが成功・失敗どちらでも発動
18	.always( function(data) {
19
20	});

Web APIのほうは、以下のようなヘッダーをいれてクロスドメイン対策しています。

PHP
1header('Access-Control-Allow-Origin: *');
2header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
3header("Content-Type: application/json; charset=utf-8");
4echo json_encode($resdata);

上記の通信において、変数 DATA にいろいろデータを入れているのですが、切り分けをしていくと、データの内容によってエラーが発生するというところまでわかりました。

成功するデータ１

js
1{
2	'command':'pushuserdata',
3	'userdata': 'あいうえお'
4}

成功するデータ２

js
1{
2	'command':'pushuserdata',
3	'userdata': '1234568790ABCDEFG1234568790ABCDEFG1234568790ABCDEFG1234568790ABCDEFG1234568790ABCDEFG'
4}

成功するデータ３

js
1{
2	'command':'pushuserdata',
3	'userdata': 'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ'
4}

成功するデータ４

js
1{
2	'command':'pushuserdata',
3	'userdata': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
4}

失敗するデータ１

js
1{
2	'command':'pushuserdata',
3	'userdata': 'あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと'
4}

失敗するデータ２

js
1{
2	'command':'pushuserdata',
3	'userdata': 'ABCDEFGHIJKLMNOPQRSTUVWXYZ（繰り返し中略：計5200文字）ABCDEFGHIJKLMNOPQRSTUVWXYZ'
4}

こう見ると、文字種でもなさそうなので、文字数の制限があるのか？という推測になるのですが、文字量によってクロスオリジンエラーがおきるようなことがあるのでしょうか。（いまのところ、正確な文字数のリミットまでは特定していません）
実際には、JSON文字列をいれて通信をしようと考えています。
関係ないと思いますが、Web API側の post_max_size などは大きめに設定しており、ajaxではない通信ではもっと大きなデータのPOST通信もしています。

手がかりがつかめず、かなり手詰まりになってしまっています。
何か確認すべき項目や、ヒントになりそうな情報などあればご教授ください。

###追記
WebAPIは、GoogleAppEngineを使っており、そのエラーログをみたところ、以下のエラーがありました。

{
httpRequest: {
status: 500 
}
insertId: "5d5b6f3e000770df41d37e94" 
labels: {
clone_id: "00c61b117cb0de3c265570bbbef38051a7c482e8932a394eb5b4555401824bf6f4d220e6ca79" 
}
logName: "projects/test/logs/appengine.googleapis.com%2Frequest_log" 
operation: {
first: true 
id: "5d5b6f3e00ff00ffb86cbdbda5e80001627e796f7473757961000172313930383230000100" 
last: true 
producer: "appengine.googleapis.com/request_id" 
}
protoPayload: {
@type: "type.googleapis.com/google.appengine.logging.v1.RequestLog" 
appEngineRelease: "1.9.71" 
appId: "b~test" 
cost: 4.8525e-8 
endTime: "2019-08-20T03:55:42.340113Z" 
finished: true 
first: true 
host: "test-api.domain.name" 
httpVersion: "HTTP/1.1" 
instanceId: "00c61b117cb0de3c265570bbbef38051a7c482e8932a394eb5b4555401824bf6f4d220e6ca79" 
instanceIndex: -1 
ip: "240b:10:9780:7b00:7444:44ec:5b73:5660" 
latency: "0.292901s" 
megaCycles: "56" 
method: "POST" 
requestId: "5d5b6f3e00ff00ffb86cbdbda5e80001627e796f7473757961000172313930383230000100" 
resource: "/apidev" 
responseSize: "334" 
startTime: "2019-08-20T03:55:42.047212Z" 
status: 500 
traceId: "3280d499df9b4199330e8281f0cf3af1" 
urlMapEntry: "auto" 
userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1" 
versionId: "r190820" 
}
receiveTimestamp: "2019-08-20T03:55:42.488752277Z" 
resource: {
labels: {
module_id: "default" 
project_id: "test" 
version_id: "r190820" 
zone: "asia-northeast1-3" 
}
type: "gae_app" 
}
timestamp: "2019-08-20T03:55:42.047212Z" 
trace: "projects/test/traces/3280d499df9b4199330e8281f0cf3af1" 
}

m.ts10806

2019/08/20 04:46

PHP側のサーバーには何かしらエラーログは残っていませんか？

tsunet111

2019/08/20 04:57

以下のような500エラーおきてました。 { httpRequest: { status: 500 } insertId: "5d5b6f3e000770df41d37e94" labels: { clone_id: "00c61b117cb0de3c265570bbbef38051a7c482e8932a394eb5b4555401824bf6f4d220e6ca79" } logName: "projects/test/logs/appengine.googleapis.com%2Frequest_log" operation: { first: true id: "5d5b6f3e00ff00ffb86cbdbda5e80001627e796f7473757961000172313930383230000100" last: true producer: "appengine.googleapis.com/request_id" } protoPayload: { @type: "type.googleapis.com/google.appengine.logging.v1.RequestLog" appEngineRelease: "1.9.71" appId: "b~test" cost: 4.8525e-8 endTime: "2019-08-20T03:55:42.340113Z" finished: true first: true host: "test-api.domain.name" httpVersion: "HTTP/1.1" instanceId: "00c61b117cb0de3c265570bbbef38051a7c482e8932a394eb5b4555401824bf6f4d220e6ca79" instanceIndex: -1 ip: "240b:10:9780:7b00:7444:44ec:5b73:5660" latency: "0.292901s" megaCycles: "56" method: "POST" requestId: "5d5b6f3e00ff00ffb86cbdbda5e80001627e796f7473757961000172313930383230000100" resource: "/apidev" responseSize: "334" startTime: "2019-08-20T03:55:42.047212Z" status: 500 traceId: "3280d499df9b4199330e8281f0cf3af1" urlMapEntry: "auto" userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1" versionId: "r190820" } receiveTimestamp: "2019-08-20T03:55:42.488752277Z" resource: { labels: { module_id: "default" project_id: "test" version_id: "r190820" zone: "asia-northeast1-3" } type: "gae_app" } timestamp: "2019-08-20T03:55:42.047212Z" trace: "projects/test/traces/3280d499df9b4199330e8281f0cf3af1" }

m.ts10806

2019/08/20 04:58

コメント欄だと見づらい（あと、デフォルト非表示なので目につかない）ので、質問本文にコードブロックで追記いただけますか？

m.ts10806

2019/08/20 04:58

ちなみにこれはどこの何（ファイル名とか）を確認した結果ですか？

tsunet111

2019/08/20 04:59

↑プロジェクト名やドメインなどだけ変えています。 WebAPIのPHP処理でエラーが起きている可能性があるという感じでしょうか。（PHP書いてはいますが、サーバー側あまり詳しくありません。。。）

m.ts10806

2019/08/20 05:07

GoogleAppEngine使ったことはないですが、きちんと成功する例もあることからサーバー側の設定ではないかな？という疑いを持っているくらいですので、正確なことは分からないですね。ログから何か辿れるかなと思って（あくまで原因究明の手段の１つとして）

tsunet111

2019/08/20 05:08

ありがとうございます。本文追記しました。エラーは、GAEのログビューワーのエラー欄にでていました。

m.ts10806

2019/08/20 05:15

コードもなるべくそのまま提示されたほうが良いかもしれません。（省略する場合も構文エラーがでない程度の最小構成のコードで）

行動規範の内容に同意します

回答2件

$resdataとあるのに定義の記述がないということは、質問には省略したコードが記述してあるのだと思います。

ってことは、以下に引っかかって｀Access-Control-Allow-Origin｀が出力されてないとかじゃないですかね？(というか、以下をスルーして出力されているっていい方が正しいかも)

PHPのheader関数の前で出力しちゃダメ、本当？

投稿2019/08/20 05:12

退会済みユーザー

総合スコア0

tsunet111

2019/08/20 05:32

おお、、、ありがとうございます！！！ヘッダーの記述を頭にもっていったら、クロスオリジンエラーはきえて、500エラーだけになりました。明確に何か出力するコードは入れていないのですが、エラーが出力されて結果クロスオリジンエラーになっていたようです。ということは、あとはおそらく構文エラーですね。前進しました。ありがとうございます。

行動規範の内容に同意します

自己解決

こちら、いただいた情報をもとに解決に向かいそうですので、閉じます！
急ぎのプロジェクトでかなりハマってしまっていたので、非常に助かりました。

結果としてクロスオリジンエラーが出ていましたが、その前のコードでエラーが発生し、そのエラーで画面出力があったために、headerが適切に付与されていなかったというのが起きていたことでした。

ちなみにこの件とまったく関係ないですが、エラーがおきていたのは、Google Datastoreの文字列上限1500バイトという上限にひっかっかり、書き込み処理のエラーがでていたようです。
https://cloud.google.com/datastore/docs/concepts/limits?hl=ja

m.ts10806さんのコメントでサーバーエラーが起きていることに気づき、te2jiさんのコメントで解決の糸口がつかめました。迷いましたが、ベストアンサーは、直接的な解決のヒントを得られた te2ji さんにさせていただきます。

本当にありがとうございました。

投稿2019/08/20 05:57

tsunet111

総合スコア59