同源是指域名、协议和端口均相同。
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源(只要域名、协议和端口有任一个不同,就被当作是跨域)
JavaScript 出于安全方面的考虑,不允许跨域调用其它页面的对象
几种常见场景:
A 客户端访问 A 服务器,并在 A 服务器上做代理访问 B 服务器,然后把请求结果返回 A 客户端,即实现了 A 客户端请求 B 服务器的跨域
是 Cross-Origin Resource Sharing(跨域请求资源共享全称),是一种跨域资源请求机制
需要被请求方的服务端设置: Access-Control-Allow-Origin
// 客户端
$.ajax({url:"http://127.0.0.1:1234/",success:function (data) {
$("div").text(data)
}})
// 服务器
var http=require('http');
http.createServer(function (req,res) {
res.setHeader("Access-Control-Allow-Origin","*");
res.end("OK");
}).listen(1234);
全称是 JSON with padding(填充式 json),是应用 JSON 的一种新方法,也是一种跨域解决方案
所有具有 src 属性的 HTML 标签都是可以跨域的,包括 <script> <img> <iframe>,
所以可以把一些资源放到第三方服务器上,然后可以通过对应标签的 src 属性引用
// 客户端
<script type="text/javascript">
$.ajax({
url:"http://127.0.0.1:1234/",
dataType:"jsonp",
jsonCallback:'abc',
success:function (data) {
console.log(data)
}
})
</script>
// 服务器
var http=require("http");
var urllib=require("url");
var data={"name":"111","addr":"222"};
http.createServer(function (req,res) {
res.writeHead(200,{'Content-type':'text/plain'});
var params=urllib.parse(req.url,true);
if(params.query&¶ms.query.callback){
console.log(params.query,params.query.callback)
var str=params.query.callback+'('+JSON.stringify(data)+')';
console.log(str)
res.end(str);
}else{
res.end(JSON.stringify(data));
}
}).listen(1234)
只能实现 get 一种请求