处理XMLHttpRequest对象AJAX跨域请求问题

 2015年09月21日    608     声明


使用JavaScirpt中的XMLHttpRequest对象可以不刷新页面的情况下更新网页,实现页面与后端服务器的数据交互。但大多数浏览器都实施了同源安全策略,要求被请求的 URL 与包含XMLHttpRequest脚本的页面具有相同的主机名和端口。浏览器的这一特性,给AJAX请求的安全带来了一定的保障,但对于需要跨域请求的项目和站点也带来了一定的困扰。


允许站点跨域请求

要允许站点被跨域请求,就需要在响应头(response headers)中增加Access-Control-Allow-Origin。你可以通过Nginx增加这个响应头:

location / {
  add_header Access-Control-Allow-Origin *;
}

除通过Nginx等Web服务器设置外,也可以通过服务端代码增加Access-Control-Allow-Origin响应头。如:在Node.js的服务端代码中,你可以这样设置:

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*')
    next();
})


更安全跨域设置

在上面的设置中,我们允许了所有域名都可以通过XMLHttpRequest对象对站点进行AJAX请求,但这种情况一般只在开放的API中使用。更多的时候,我们只需要对一个或几个站点开放访问。所以,我们可以像下面这样的设置:

//只对http://itbilu.com开放访问
location / {
  add_header Access-Control-Allow-Origin http://itbilu.com:80;
}
//只对http://itbilu.com、http://www.mindpush.cn开放访问
location / {
  add_header Access-Control-Allow-Origin http://itbilu.com:80,http://www.mindpush.cn:80;
}

仅对http://itbilu.com开放访问,在Node.js中可以这样设置:

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://itbilu.com:80')
    next();
})

更多关于XMLHttpRequest对象的介绍可以参考这两篇文章:JS使用XMLHttpRequest对象与服务器进行数据交互JS使用XMLHttpRequest对象POST收发JSON格式数据