質問編集履歴

2 問題点の書き直し

meron-pan

meron-pan score 38

2018/10/14 00:30  投稿
cgiは動作するのに値がブラウザで確認できない。
### 前提・実現したいこと
pythonの標準ライブラリhttp.serverを使ってローカルでサーバーを作り、データの通信実験をしてみました。
しかし、cgiは「CGI script exited OK」と出るのに、POST通信ではブラウザには何も返って来ていないことになっていて困惑しています。
~~しかし、cgiは「CGI script exited OK」と出るのに、POST通信ではブラウザには何も返って来ていないことになっていて困惑しています。~~
これはコードのミスでした（javascriptで受け取るコードを実行していなかった）のですが、結局受信した結果で例外が発生し、その例外の内容もundefinedになってしまい原因がわかりません。
サーバーに対する知識は全くないので、ネットのありとあらゆる場所からコードを引っ張って作ったコードですが、問題点を教えてください。
### 発生している問題・エラーメッセージ
cgiは動作するのに値がブラウザで確認できない。（確認として、POST通信ではない状態で、アクセスしたらhtmlを返すコードを追加しましたところ、~~「Content-Type:」だけが表示されました。~~※単純なhtmlのミスでした。スイマセン。修正しました）
### 該当のソースコード
cgi
```python
#!/usr/bin/python3
# -*- coding: utf-8 -*-
import io
import os
import sys
import cgi
import cgitb
import urllib.request
import json
cgitb.enable()
sys.stdin = io.TextIOWrapper(sys.stdin.buffer, encoding='utf-8')
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')
html = '''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body { background-color: cyan; }
</style>
<title>初めてのpython3CGI</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<header>
<h1 id="titlename">初めてのpython3CGI</h1>
</header>
<div id="contents">
<article>
<section id="top" style="display:block">
</section>
</article>
</div>
<footer>
</footer>
</body>
</html>
'''
print("Access-Control-Allow-Methods: GET ,POST ,OPTIONS")
print("Access-Control-Allow-Origin: *")
print("Access-Control-Allow-Headers: *")
if os.environ['REQUEST_METHOD'] == 'POST':
form = cgi.FieldStorage()
result_json = {'key': 'value'}  
print("Content-Type: application/json; charset=utf-8\r\n")
print('\n')
print(form)
print(json.dumps(result_json))
else:
print("Content-Type: text/html; charset=utf-8\r\n")
print('\n')
print(html)
```
```html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Javascript試験用</title>
   <script charset="UTF-8" type="text/javascript" src="ajax.js"></script>
</head>
<body>
   <div id="outputArea"></div>
   <div id="inputArea">
       <form>
           <textarea name="input" rows="2" cols="20"></textarea>
       </form>
       <button id="ajaxButton" type="button">決定</button>
   </div>
   <div id="dispArea"></div>
</body>
</html>
```
```javascript
ajaxSend = function (json) {
   console.log("a")
   var xhr = new XMLHttpRequest();
   xhr.open("POST", 'http://localhost:8000/cgi-bin/server.py', true);
   xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
   xhr.send(json);
   
　　ajaxGet();
}
ajaxGet = function () {
   var req = new XMLHttpRequest();
   try{
       if (httpRequest.readyState === XMLHttpRequest.DONE) {
           if (httpRequest.status === 200) {
               console.log("返ってきたよ")
               console.log(req.responseText)
             console.log(req.responseText)
             alert(req.responseText);
           }else {
               alert('リクエストに問題が発生しました');
           }
       }
   }
   catch(e){
       alert('例外を補足：'+e.description);
   }
}  
 
 
//独自関数  
createTable = function (rows, cells, tableID) {  
   "use strict";  
   var table = document.createElement("table");  
   table.id = tableID;  
   for (var i = 0; i < rows; i++) {  
       var row = table.insertRow(-1);  
       for (var j = 0; j < cells; j++) {  
           var cell = row.insertCell(-1);  
           var data = document.createTextNode("");  
           cell.appendChild(data);  
       }  
   };  
   document.getElementById("dispArea").appendChild(table);  
}
json = {
   "messages":
       [
           {
               "date": "2012/1/12 19:12",
               "text": "こんばんは"
           }
           ,
           {
               "date": "2012/1/11 19:12",
               "text": "Hello"
           }
       ]
}
window.onload = function(){
   document.getElementById("ajaxButton").addEventListener('click',function(){ajaxSend(json)})
}
```
### 補足情報（FW/ツールのバージョンなど）
使用しているpythonはpython3.7、ブラウザはfirefox、実行環境はwondows10homeです。
  • JavaScript

    29407 questions

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

  • Python 3.x

    15716 questions

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

  • CGI

    114 questions

    CGI（Common Gateway Interface）とは、Webサーバー上でユーザプログラム動作させる仕組みのこと。また、動かす前提のプログラムをCGIと呼ぶこともあります。HTMLなどの静的な情報に限らず、プログラムの処理結果をベースにした動的情報の提供が可能です。
1 コードの修正

meron-pan

meron-pan score 38

2018/10/13 17:40  投稿
cgiは動作するのに値がブラウザで確認できない。
### 前提・実現したいこと
pythonの標準ライブラリhttp.serverを使ってローカルでサーバーを作り、データの通信実験をしてみました。
しかし、cgiは「CGI script exited OK」と出るのに、ブラウザには何も返って来ていないことになっていて困惑しています。
しかし、cgiは「CGI script exited OK」と出るのに、POST通信ではブラウザには何も返って来ていないことになっていて困惑しています。
サーバーに対する知識は全くないので、ネットのありとあらゆる場所からコードを引っ張って作ったコードですが、問題点を教えてください。
### 発生している問題・エラーメッセージ
cgiは動作するのに値がブラウザで確認できない。（確認として、POST通信ではない状態で、アクセスしたらhtmlを返すコードを追加しましたところ、「Content-Type:」だけが表示されました。）
cgiは動作するのに値がブラウザで確認できない。（確認として、POST通信ではない状態で、アクセスしたらhtmlを返すコードを追加しましたところ、~~「Content-Type:」だけが表示されました。~~※単純なhtmlのミスでした。スイマセン。修正しました）
### 該当のソースコード
cgi
```python
#!/usr/bin/python3
# -*- coding: utf-8 -*-
import io
import os
import sys
import cgi
import cgitb
import urllib.request
import json
cgitb.enable()
sys.stdin = io.TextIOWrapper(sys.stdin.buffer, encoding='utf-8')
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')
html = '''Content-Type: text/html
html = '''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body { background-color: cyan; }
</style>
<title>初めてのpython3CGI</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<header>
<h1 id="titlename">初めてのpython3CGI</h1>
</header>
<div id="contents">
<article>
<section id="top" style="display:block">
</section>
</article>
</div>
<footer>
</footer>
</body>
</html>
'''
print("Access-Control-Allow-Methods: GET ,POST ,OPTIONS")
print("Access-Control-Allow-Origin: *")
print("Access-Control-Allow-Headers: *")
if os.environ['REQUEST_METHOD'] == 'POST':
form = cgi.FieldStorage()
print("Content-Type: application/json; charset=utf-8\r\n")
print('\n')
print(form)
else:
print("Content-Type: text/html; charset=utf-8\r\n")
print('\n')
print(html)
```
```html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Javascript試験用</title>
   <script charset="UTF-8" type="text/javascript" src="ajax.js"></script>
</head>
<body>
   <div id="outputArea"></div>
   <div id="inputArea">
       <form>
           <textarea name="input" rows="2" cols="20"></textarea>
       </form>
       <button id="ajaxButton" type="button">決定</button>
   </div>
   <div id="dispArea"></div>
</body>
</html>
```
```javascript
ajaxSend = function (json) {
   console.log("a")
   var xhr = new XMLHttpRequest();
   xhr.open("POST", 'http://localhost:8000/cgi-bin/server.py', true);
   xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
   xhr.send(json);
   
}
ajaxGet = function () {
   var req = new XMLHttpRequest();
   try{
       if (httpRequest.readyState === XMLHttpRequest.DONE) {
           if (httpRequest.status === 200) {
               console.log("返ってきたよ")
               console.log(req.responseText)
             alert(req.responseText);
           }else {
               alert('リクエストに問題が発生しました');
           }
       }
   }
   catch(e){
       alert('例外を補足：'+e.description);
   }
}
//独自関数
createTable = function (rows, cells, tableID) {
   "use strict";
   var table = document.createElement("table");
   table.id = tableID;
   for (var i = 0; i < rows; i++) {
       var row = table.insertRow(-1);
       for (var j = 0; j < cells; j++) {
           var cell = row.insertCell(-1);
           var data = document.createTextNode("");
           cell.appendChild(data);
       }
   };
   document.getElementById("dispArea").appendChild(table);
}
json = {
   "messages":
       [
           {
               "date": "2012/1/12 19:12",
               "text": "こんばんは"
           }
           ,
           {
               "date": "2012/1/11 19:12",
               "text": "Hello"
           }
       ]
}
window.onload = function(){
   document.getElementById("ajaxButton").addEventListener('click',function(){ajaxSend(json)})
}
```
### 補足情報（FW/ツールのバージョンなど）
使用しているpythonはpython3.7、ブラウザはfirefox、実行環境はwondows10homeです。
  • JavaScript

    29407 questions

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

  • Python 3.x

    15716 questions

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

  • CGI

    114 questions

    CGI（Common Gateway Interface）とは、Webサーバー上でユーザプログラム動作させる仕組みのこと。また、動かす前提のプログラムをCGIと呼ぶこともあります。HTMLなどの静的な情報に限らず、プログラムの処理結果をベースにした動的情報の提供が可能です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る