jquery ajax(CORS) 跨域 访问接口

今天进行前后端调试，由于接口目前和前端不在一台机器上，所以前端使用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: '[email protected]',
        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: '[email protected]',
        firstName: 'Brandon',
        lastName: 'Cannaday'
};

var userString = JSON.stringify(user);
           

参考：

1、https://developer.chrome.com/extensions/xhr

2、http://www.html5rocks.com/en/tutorials/cors/