CORS跨域请求
CORS是W3C推出的一种新的机制，即跨资源共享（Cross-Origin Resource Sharing）。这种机制允许浏览器向跨源服务器发出XMLHTTPRequest请求，它基于浏览器的一个内置机制需要浏览器的支持。
简单请求必须满足：1.请求方式为get，post，head 2.数据类型Content-Type只能是application/x-www-form-rulencoded、mulitipart/form-data或text/plain中的一种
简单请求
//客户端 <!DOCTYPE html> <html> <head> <title>cors</title> <meta charset="utf-8"> </head> <body> <button onclick="sendGet()">点击我发一个简单的请求</button> <script type="text/javascript"> // ajax发送请求的函数 function sendGet(){ var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 && xmlHttp.status === 200){ var data = xmlHttp.responseText; alert(data); } }; // get方式的简单请求 xmlHttp.open('GET','http://localhost:3000/3-6-2-cors-1-data',true); xmlHttp.send(); } </script> </body> </html> // 服务器端 // jsonp跨域 app.get('/3-6-2-json-1.js',function(req,res){ res.render('3-4-1-post'); }); // cors.html app.get('/cors',function(req,res){ res.render('cors'); });
预请求
预请求是一种相对复杂的请求，需要满足：1.预请求是GET，HEAD，POST以外的方式，比如PUT，DELETE等
2.使用POST请求方式，但数据是application/xml或者text/xml的XML数据请求 3.使用了自定义的请求头信息
// 服务器 // sors预请求 app.use('/3-6-2-cors-3-data',function(req,res){ res.set({ 'Access-Control-Allow-Origin':'*', 'Access-Control-Allow-Methods':'GET,PUT,POST', 'Access-Control-Allow-Headers':'X-Our-Header' }); res.send('这是来自nodejs的数据'); }); //客户端 <!DOCTYPE html> <html> <head> <title>测试cors</title> <meta charset="utf-8"> </head> <body> <button onclick="sendGet()">点击发起一个请求</button> <script type="text/javascript"> // Ajax发送请求的函数 function sendGet(){ var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 && xmlHttp.status === 200){ var data = xmlHttp.responseText; alert(data); } } // PUT方式的简单请求 xmlHttp.open('PUT','http://127.0.0.1:3000/3-6-2-cors-3-data',true); // 设置请求头信息 xmlHttp.setRequestHeader('x-Our-Header','ab'); // 发送请求 xmlHttp.send(); } </script> </body> </html>
附带凭证信息的请求
XMLHttpRequest对象在发送同域请求时会发送凭证（Http Cookie和验证信息，但是跨域请求则不会发送），所以想要传递cookie只能在请求头里携带
实例：
// 服务器 // cors_cookie app.get('/cors_cookie',function(req,res){ res.render('cors_cookie'); }); // cors_cookie app.get('/3-6-2-cors-4-data',function(req,res){ console.log(req.cookies); res.set({ 'Access-Control-Allow-Origin':'http://127.0.0.1', 'Access-Control-Allow-Credentials':true }); res.send('这是来自nodejs的数据'); }); // 客户端 <!DOCTYPE html> <html> <head> <title>cors_cookie</title> <meta charset="utf-8"> </head> <body> <button onclick="sendGet()">点击我发送一个cors跨域请求</button> <script type="text/javascript"> document.cookie = "name=ab"; // Ajax发送请求的函数 function sendGet(){ var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 && xmlHttp.status === 200){ var data = xmlHttp.responseText; alert(data); } }; // GET方式的简单请求 xmlHttp.open('GET','http://localhost:3000/3-6-2-cors-4-data',true); xmlHttp.withCredentials = true; // 只需要在客户端申明这个就好了 //xmlHttp.setRequestHeader('x-Our-Header','ab'); xmlHttp.send(); } </script> </body> </html>
ajax优缺点
ajax的优点
1.无刷新，在不刷新页面的情况下加载数据增加用户体验
2.浏览器都支持不需要重新下载额外插件
3.使用异步通信用户不用长时间来等某一个操作，可以继续其他操作
4.减轻服务器压力，加快响应速度
ajax的缺点
1.破坏后退功能，用户不能通过后退来取消前一次操作，虽有办法，但是仍然很笨重
2.网络延迟问题。通常会通过一些进度条来告诉用户正在读取数据
3.安全性问题。ajax变相地提供了一个访问数据库的接口，而且ajax的代码都是暴露在浏览器中的，很容易被黑客利用，进行脚本攻击或者sql注入，当然对应地也有一些方法去解决这些问题
总体来说优点大于缺点。
