以下、6項目についてみていきます。HTMLファイルから送信しています。
送信も受信もローカルで行っています。サーバで試すなら、ドメインとか適宜読み替えてください。
- Flask Get Parameter取得
- Flask Post Body取得
- Flask Cors有効化
- Express Get Parameter取得
- Express Post Body取得
- Express Cors有効化
注意点として、Content-Typeはすべてapplication/jsonで送信しています。
HTML（送信側）
ブラウザで表示して、実行してください
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><inputtype="text"name="id"id="body"><buttonid="click">Send</button><script>document.querySelector("#click").addEventListener("click",function(){letdata=document.querySelector("#body").value;constbody={id:data};fetch("http://localhost:5000/post",{method:"POST",headers:{'Content-Type':"application/json"},body:JSON.stringify(body)}).then((res)=>{if(!res.ok){thrownewError();}returnres.json();}).then((res)=>{console.log(res)}).catch((res)=>{console.log(`Error Response : ${res}`);})})</script></body></html>Flaskを使う場合（受信側）
# -*- encoding:utf-8 -*-
importosimportsysimportjsonfromflaskimportFlask,render_template,requestfromloggingimportgetLogger,StreamHandler,DEBUG,INFO,WARNING,ERROR,CRITICALapp=Flask(__name__)#ログ設定
logger=getLogger(__name__)handler=StreamHandler()handler.setLevel(DEBUG)logger.setLevel(os.getenv("LogLevel",DEBUG))logger.addHandler(handler)logger.propagate=False# CORSを有効にする
@app.after_requestdefafter_request(response):logger.debug(f"\033[33m{sys._getframe().f_code.co_name} function called\033[0m")response.headers.add('Access-Control-Allow-Origin','*')response.headers.add('Access-Control-Allow-Headers','Content-Type,Authorization')response.headers.add('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,OPTIONS')returnresponse#Get Parameter 取得
@app.route('/get')defget():Id=""if"id"inrequest.args:Id=request.args.get('id')logger.info(f"Id = {Id}")else:returnjson.dumps({"message":"send message"})returnjson.dumps({"message":"OK"})#Post body 取得
@app.route('/post',methods=["POST"])defpost():Id=""#json形式で渡ってきたパラメーターはこのようにして受け取る
logger.debug(f"request.json = {request.json}")logger.debug(f"type(request.json) = {type(request.json)}")if"id"inrequest.json:Id=request.json["id"]logger.info(f"Id = {Id}")else:returnjson.dumps({"message":"send message"})returnjson.dumps({"message":"OK"})if__name__=="__main__":app.run(host='0.0.0.0',port=5000)Expressを使う場合（受信側）
Expressのバージョンが 4.16以降の場合、body-parserは必要なく、expressのみで実装できる
constexpress=require('express');constapp=express()/**
* Express 4.16以降は、body-parserを元に実装されたexpress.json()
* でPOSTのbodyを取得することができる。
* よって、以下のようにreq.body をする必要はない。
*
* const bodyParser = require('body-parser');
* app.use(bodyParser.urlencoded({ extended: false }));
*/app.use(express.json());//Content-Type が application/json として送信される場合、これが必要app.use(express.urlencoded({extended:true}));// CORSを有効にするapp.use(function(req,res,next){res.header("Access-Control-Allow-Origin","*");res.header("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");next();});//Get Parameter 取得app.get('/get',(req,res)=>{letresponse="";console.log(req.query);console.log(typeofreq.query);if(req.query.hasOwnProperty("id")){response=req.query.id}res.json({"Get Parameter":response});})//Post body 取得app.post('/post',(req,res)=>{letresponse="";console.log(req.body);console.log(typeofreq.body);if(req.body.hasOwnProperty("id")){response=req.body.id}res.json({"Post Body":response});})//listenの第2引数には待ち受け開始直後に行うコールバック関数を書くapp.listen(5000)