今天进行前后端调试,由于接口目前和前端不在一台机器上,所以前端使用ajax访问接口需要跨域;
准备工作:
1、使用的是CROS
2、前端使用jquery的ajax;
3、后端node + express
步骤:
1、前端配置:
$.ajax(
type: "POST",
url: "http://xxxxxx",
dataType: 'json'
data: { name: "John", location: "Boston" }
xhrFields:
'Access-Control-Allow-Origin': '*'
).done((msg)->
console.log "Data Saved: " + msg
false
).fail((jqXHR, textStatus)->
console.log "fail: " + textStatus
false
)
2、后端配置:
router.post('/create', function(req, res) {
var db = req.db;
res.setHeader('Access-Control-Allow-Origin','*');
var user = {
username: 'The Reddest',
email: 'brandon@switchonthecode.com',
firstName: 'Brandon',
lastName: 'Cannaday'
};
var userString = JSON.stringify(user);
res.send(userString);
});
总结:
1、前端需要指定 dataType 和 Access-Control-Allow-Origin
dataType: 'json'
data: { name: "John", location: "Boston" }
xhrFields:
'Access-Control-Allow-Origin': '*'
2、后端需要 配置Access-Control-Allow-Origin 和 结果转成json
es.setHeader('Access-Control-Allow-Origin','*');
var user = {
username: 'The Reddest',
email: 'brandon@switchonthecode.com',
firstName: 'Brandon',
lastName: 'Cannaday'
};
var userString = JSON.stringify(user);
参考:
1、https://developer.chrome.com/extensions/xhr
2、http://www.html5rocks.com/en/tutorials/cors/