跨域：簡單來看，現有A,B兩個服務分别部署在不同機器上，A服務不能直接通路B服務的資源(除非B服務允許)，這就是跨域現象，這樣可以保證B服務的安全性。
目前很多網際網路項目都是前後端分離，并且部署在不同機器上，這種情況前端需要通路後端資源(通常是接口)，就需要後端服務支援跨域通路，比如通常設定為Access-Control-Allow-Origin：*
再例如，個人電腦相當于一個站點，本地的html文檔中寫了一段js代碼，其url位址請求www.baidu.com（或者本地伺服器位址），就是一種跨域現象。
抛出異常： Origin 'null' is therefore not allowed access.
解決：對于NodeJs來說，在js伺服器頁面加入代碼：
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.setHeader("X-Powered-By",' 3.2.1');
res.setHeader("Content-Type", "text/html");
完整執行個體：
node.js伺服器代碼：
var http=require("http")
var fs = require('fs')
var server=http.createServer();
server.on('request',function(req,res){
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.setHeader("X-Powered-By",' 3.2.1');
res.setHeader("Content-Type", "text/html");
if(req.url === "/login"){
fs.readFile('./login.html','utf-8',function(err,data){
if(err){
console.log(err)
}
res.end(data)
})
}
})
server.listen(1337,"localhost",function(){
console.log("開始監聽...");
});
基于ajax的伺服器請求：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<input type="button" value="異步傳輸">
<div id="box" ></div>
</body>
</html>
js代碼：
$(function(){
$('input').load('http://localhost:1337/login',function(response,status,xhr){
$('#box').html(response);
});
});
本地主機被請求的html頁面：
<!DOCTYPE html>
<html >
<head>
<title>Document</title>
</head>
<body>
<strong><h2>歡迎登陸</h2></strong>
</body>
</html>
------------------------
傳回json資料：
var http=require("http")
var fs = require('fs')
var url = require('url')
var server=http.createServer();
server.on('request',function(req,res){
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.setHeader("X-Powered-By",' 3.2.1');
res.setHeader("Content-Type", "application/json");
var result = url.parse(req.url,true).query
console.log(result.id)
if(req.url === "/login"){
fs.readFile('./login.html','utf-8',function(err,data){
if(err){
console.log(err)
}
res.end('{"id":12,"user":"zhangsan"}') //json對象的屬性需要加""
})
}
})
server.listen(1337,"localhost",function(){
console.log("開始監聽...");
});
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)