JavascriptとNode.js間での非同期通信(POST通信)が出来ません。

Question

お世話になっております。プログラミング初心者のものです。

現在Node.jsを学習しており、
Javascript(クライアント)とNode.js(サーバ)間での非同期通信(POST通信)を行いたいのですが、
うまく接続できず困っております。

ご有識の方がいらっしゃったら、ご教示いただきたく存じます。

ここで行いたいことは、
「クライアント側で文字列を送信し、受け取ったサーバー側は「"hello"」を返す。」です。

ソースは以下のとおりです。(抜粋)

[HTML]
<input type="button" name="実行" value="実行" onClick='action();'/>

[Javascript]
function action(){
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8080');
xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
var text = "こんにちは";
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
alert( xhr.responseText + "を受け取りました。" );
}
}
xhr.send(text);
}
[Node.js]

var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
res.writeHead(200, {'Content-Type' : 'text/plain'});
res.write('hello!');
res.end();
});
server.listen(8080);

実行手順
① node [node.jsソースコード名]でサーバー起動
② html側の「実行」ボタンを押下することで、上記javascriptが起動。

よろしくお願いいたします。

Comments

[Yasumichi]

まず、 Function を function と小文字にした方が良いと思います。

[YUTO_IT]

ご回答ありがとうございます。
失礼しました、転記時に誤りました。

[Yasumichi]

あと、ソースの方を

```js
JavaScript のソースを書く
```

とか、

```html
HTML のソースを書く
```

のようにすると質問が見やすくなります。

対応しているMarkdownの記法を知りたい
https://teratail.com/help#about-markdown

[Yasumichi]

とりあえず、Firefox の開発者ツールのネットワークのタブで見ると通信はできてて応答は返ってきてます。

[AkitoshiManabe]

> ② html側の「実行」ボタンを押下する
そのhtmlは、どのように表示したのでしょうか。

Answer 1

とりあえず、Firefox の開発者ツールのネットワークのタブで見ると通信はできてて応答は返ってきてます。

その後、開発者ツールでコンソールを除くと以下のようなエラーが出ていました。

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://localhost:8080/ にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。

サーバー側で Access-Control-Allow-Origin を出力するようにしてみたところ、動作しました。

var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
  res.statusCode = 200
  res.setHeader('Content-Type', 'text/plain');
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.end('Hello!');
});
server.listen(8080); 

なお、今回は、とりあえず動作させるために

Access-Control-Allow-Origin: *

としましたが、セキュリティを考慮するとドメインを指定した方が良いです。

Comments

[YUTO_IT]

Yasumichi　様
ご回答いただき、ありがとうございます。
いただいた改善点を反映させたところ、無事に動作することが出来ました。
また、頂いた資料「対応しているMarkdownの記法を知りたい」ありがとうございました。

AkitoshiManabe　様
お力添えいただきありがとうございました。
またよろしくお願いいたします。