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

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

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

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

CORS

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

Q&A

解決済

1回答

3875閲覧

摩訶不思議な現象。Corsエラーがクエリパラメータで一定の文字数以上を渡した時にのみ発生する

faust_0918

総合スコア7

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

CORS

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

0グッド

3クリップ

投稿2020/10/16 13:47

編集2020/10/17 01:04

摩訶不思議な現象が起きて困っております。

フロントエンドを通常のjqueryを入れたHTML(localhost)、バックエンドをPythonのFlask(レンタルサーバ)を使ってデータのやりとりをしています。HTMLからPost通信でバックエンドのAPIを叩くのですが、クエリパラメータで一定の文字数以上を渡した時にのみCorsエラーが発生します。

log

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

不思議なのは一定以上の文字列を渡した時にのみ発生することです

フロントエンドからは下記でAPIを叩いています。
なお、#input_messageはtextareaでとったユーザーの入力文字列です。

javascript

1function main(){ 2 3 console.log(123); 4 let input_message = document.getElementById("input_message").value; 5 $.post( 'http://api.myDomain/test/', 'queryA='+input_message ) 6 .done(function( data ) { 7 console.log( data ); 8 data = JSON.parse(data) 9 document.getElementById("output_message").value = data; 10 }) 11

この時、渡すデータの文字数が100文字程度以上だとエラーが発生するのですが、それ以下だと発生しません。エラーメッセージは下記です。

log

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

なのでバックエンド側でCors設定していないようなメッセージですが、短いデータを渡すと処理されます。
なので全く意味がわからず困っております。なお、バックエンドはPythonのFlask3.0.9です。Corsはすべて解除しております。

python

1# -*- coding: utf-8 -*- 2import json 3from flask import Flask,request 4from flask_cors import CORS 5from google.cloud import language 6from google.cloud.language import enums 7from google.cloud.language import types 8 9from google.cloud import language_v1 10from google.cloud.language_v1 import enums 11app = Flask(__name__) 12CORS(app)

ある文字数以上で発生するのでまったく意味がわかりません。
どなたかアドバイスいただけないでしょうか。

ヘッダー情報

ヘッダー情報などを追記します。(Chromeのネットワークタブで確認しました)
◎渡す文字数が少なくてうまくいく場合

general

1Request URL: http://api.myDomain.com/test/ 2Request Method: POST 3Status Code: 200 OK 4Remote Address: 183.**.**.37:80 5Referrer Policy: strict-origin-when-cross-origin

responseHeader

1HTTP/1.1 200 OK 2Server: nginx 3Date: Sat, 17 Oct 2020 00:51:54 GMT 4Content-Type: text/html; charset=utf-8 5Content-Length: 219 6Connection: keep-alive 7Access-Control-Allow-Origin: http://localhost:8080 8Vary: Origin 9Accept-Ranges: bytes 10

RequestHeader

1POST /test/ HTTP/1.1 2Host: api.np-sys.com 3Connection: keep-alive 4Content-Length: 58 5Accept: */* 6User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 7Content-Type: application/x-www-form-urlencoded; charset=UTF-8 8Origin: http://localhost:8080 9Referer: http://localhost:8080/ 10Accept-Encoding: gzip, deflate 11Accept-Language: ja,en-US;q=0.9,en;q=0.8

◎渡す文字数が多くてうまくいかない場合

general

1Request URL: http://api.myDOmain.com/test/ 2Referrer Policy: strict-origin-when-cross-origin

responseHeader

1HTTP/1.1 500 Internal Server Error 2Server: nginx 3Date: Sat, 17 Oct 2020 00:51:56 GMT 4Content-Type: text/html 5Content-Length: 3028 6Connection: keep-alive 7Last-Modified: Sat, 28 Jul 2018 08:59:43 GMT 8ETag: "bd4-5720b730b4f22" 9

RequestHeader

1POST /test/ HTTP/1.1 2Host: api.myDomain.com 3Connection: keep-alive 4Content-Length: 311 5Accept: */* 6User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 7Content-Type: application/x-www-form-urlencoded; charset=UTF-8 8Origin: http://localhost:8080 9Referer: http://localhost:8080/ 10Accept-Encoding: gzip, deflate 11Accept-Language: ja,en-US;q=0.9,en;q=0.8

情報不足や要領悪い部分あると思いますが、何卒よろしくお願いいたします。

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

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

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

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

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

ockeghem

2020/10/16 14:34

まずは、エラーになる・ならない状況でAccess-Control-Allow-Originヘッダがどうなっているかを確認して、それを追記してください。
faust_0918

2020/10/17 01:10

コメントありがとうございます。追記させていただきました。何卒よろしくお願いいたします。
guest

回答1

0

ベストアンサー

◎渡す文字数が多くてうまくいかない場合
HTTP/1.1 500 Internal Server Error

サーバーサイドの処理でエラーが出ているので原因を調査し、サーバーサイドの処理を修正してください。

投稿2020/10/17 01:14

Y.H.

総合スコア7914

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問