🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Flask

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

Q&A

解決済

1回答

1648閲覧

ブラウザ、JsからGCF内のPythonコードにPOSTリクエストを送るとCORSエラーを解決したいです。

amaturePy

総合スコア131

Flask

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

0グッド

0クリップ

投稿2021/02/26 02:18

編集2021/02/26 02:35

現在Jsファイルを使ってHTML内にアクセスしたユーザー情報のログを取得するための開発をしております。
そのために、HTMLページのscriptタグ内にJsファイルを配置して、一旦そのJsファイルを発火させて挙動をテストしております。
Jsタグの処理としては以下になります。
①URL上のクエリパラメータを取得し、それを変数に格納
②その変数を引数としてCloud Functions内のPython(Flask)のコードに渡します
その際に表題の通りCORSエラーが出てうまくリクエストを送れずにいます。

Pythonコードの処理としては
①受け取った引数をBigQueryにSQLのINSERTで格納する
といった簡単な処理になっております。
Pythonコードの処理はPostmanからリクエストを送るとCORSエラーは起きず問題なく実行されます。

今回のようなJsを絡めた処理の経験が浅く、設計並びにJsに関して日本語がおかしい箇所もあるかもしれませんが、ご教授頂けると幸いです。よろしくお願いします。

PythonのコードではCORSエラー対策を加えているので、Js側(node.jsのモジュール)などで何か設定をしないといけないのかと考えています。

test.js function getUserid(){ let url = new URL(location.href); let userid = url.searchParams.get('userid'); return userid; } let params = { "userid": getUserid() } let json_params = JSON.stringify(params); let url = "https://test_project.cloudfunctions.net/uploadClick" let request = new XMLHttpRequest(); request.open('POST', url); request.setRequestHeader('Content-Type', 'application/json'); request.onreadystatechange = function () { if (request.onreadystatechange != 4) { console.log("request now"); } else if (request.status != 200) { console.log("request failed"); } else { var result = request.responseText; console.log("request success"); console.log(result); } }; request.send(json_params);
main.py def uploadClick(request): if request.method == 'OPTIONS': headers = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'POST', 'Access-Control-Allow-Headers': 'Content-Type', 'Access-Control-Max-Age': '3600', 'Access-Control-Allow-Credentials': 'true' } return ('', 204, headers) request_json = request.get_json(silent=True) userid = request.args utc_now = datetime.now(timezone('UTC')) jst_now = utc_now.astimezone(timezone('Asia/Taipei')) jst_now = jst_now.isoformat(timespec='seconds') client = bigquery.Client() userid = request.args.get('userid') or '' query = "INSERT `test_project.click_log.click_log_` (userid,timestamp) VALUES ('{0}', '{1}')".format(userid,jst_now) query_job = client.query(query) query_res = query_job.result() headers = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Credentials': 'true' } return ('Hello World!', 200, headers)

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

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

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

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

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

guest

回答1

0

自己解決

原因は定かじゃないのですが、Python側のコードをデプロイし直したところ、エラーは消えました。

投稿2021/02/26 04:26

amaturePy

総合スコア131

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問