今天在玩vue-resource時，后臺使用nodejs來提供數據，由于需要跨域，在網上也找到了解決方法。

vue-resource代碼(其實就是ajax技術)：

this.$http.get({url:"http://localhost:3000/getdata"})
.then(function (data) {console.log(data)
},function (error) {});

nodejs部分：

var express = require('express');
var app = express();
//設置跨域訪問
app.all('*', function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");res.header("X-Powered-By",' 3.2.1')res.header("Content-Type", "application/json;charset=utf-8");next();
});app.get('/getdata', function(req, res) {res.send({id:req.params.id, name: req.params.password});
});app.listen(3000);
console.log('Listening on port 3000...');

前世今生

在WEB應用普及的今天，個人信息（賬號、COOKIE等）廣泛應用于網頁。瀏覽器同源策略保證了WEB環境的安全性。同源策略是說，在a.com域名下通過ajax或者XmlHttpRequest等方式訪問b.com的資源時，是不被允許的。

然而在很多時候，出于業務的的需要，我們經常有類似的跨域訪問?的需求。瀏覽器有一些支持跨域訪問的標簽，例如script,img等。有這樣的需求，自然就衍生了一些解決辦法。

比較普遍的是通過jsonp的方式來實現接口。

另外一個方式就是在服務器端配置，允許部分或者所有頁面進行跨域訪問。

JSONP方式

簡單來說，jsonp返回的不是json數據，而且一段通過函數將json數據包起來的js代碼。這樣，就可以通過script標簽來加載這段代碼，實現任意服務器的訪問。?
對于如下一個返回json數據的接口：

http://www.test.com/jsonServerResponse
1

其對應的jsonp方式的用法如下，其中jsonpCallback是客戶端實現的處理json數據的函數。

<script>var data;function jsonpCallback(result) {data = result;}
</script>
<script src="http://www.test.com/jsonServerResponse?callback=jsonpCallback"></script>
1
2
3
4
5
6
7

前端頁面在調用接口時，需要以callback=jsonpCallback的形式，將本地實現的處理json數據的函數上傳到服務器。跨域服務器實現相應的jsonp接口

http://www.test.com/jsonServerResponse?callback=jsonpCallback
1

這個接口的返回數據如下

jsonpCallback({'msg':'this is json data'});
1

可以看出，關鍵得在服務器端實現jsonp方式的接口，有了這些，客戶端就可以自由的跨域了！

服務器端

另外一個辦法，直接在服務器端，允許某些來源、某些接口、某些方法以某些形式被跨域調用。

nodejs express配置

app.all('/test', function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header('Access-Control-Allow-Headers', 'Content-Type');next();
});
1
2
3
4
5
6
7

nginx配置

然而添加了這些之后，仍然不好使。查了查，可能是要在nginx上也作設置，在nginx相應路徑添加如下：

location ^~ /test {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'OPTION, POST, GET';add_header 'Access-Control-Allow-Headers' 'X-Requested-With, Content-Type';
}
1
2
3
4
5
6

之后重新加載nginx配置即可，大功告成。