1. 程式人生 > >node網頁post提交以及伺服器處理跨域

node網頁post提交以及伺服器處理跨域

網頁
 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
</head>
<body>
	
		使用者:<input type="text" name="username" id="username"/><br/>
		密碼:<input type="password" name="pass" id="pass"><br/>
		<button onclick="submitF()">提交</button>

	<script type="text/javascript">
		function submitF(){
			let username=$("#username").val();
			let password=$("#pass").val();
			$.ajax({
				url:"http://localhost:3000/",
				type:"POST",
				data:{name:username,pass:password},
				datatype:"JSON",
				success(dt){
					console.log(dt);
				}
			})
		}
	</script>
</body>
</html>

rouder.js
 

var http=require("http");

http.createServer(function(req,res){
	//設定跨域
	res.writeHead(200,{"Content-type":"text/html;charset=UTF-8","Access-Control-Allow-Origin":'*'});
	//獲取是post還是get
	if (req.method.toLowerCase()=="post") {
		//設定一個空的字串
		let allData="";
		//若有內容會自動呼叫data方法(類似JAVA裡的IO流)
		req.on("data",function(chunk){
			//類似於IO流裡面讀取檔案內容的寫法
			allData+=chunk;
		})
		//若已流完則呼叫這個方法
		req.on("end",function(){
			//轉成字串再返回
			res.end(allData.toString());
		})
	}
}).listen(3000,"localhost");