跨域有三个条件，满足任何一个条件就是跨域
1：服务器端口不一致
2：协议不一致
3：域名不一致
解决方案：
1.jsonp
在远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理；在前台通过动态添加script标签及src属性，表面看上去与ajax极为相似，但是，这和ajax并没有任何关系；为了便于使用及交流，逐渐形成了一中非正式传输协议，人们把它称作 jsonp 。
代码如下：
html：
<body>
<form action=\”/\” method=\”post\” enctype=\”multipart/form-data\”>
<input type=\”text\” name=\”xinxi\” id=\”info\”><br>
<input type=\”file\” name=\”file\” id=\”file\”><br>
<input type=\”button\” value=\”提交\” name=\”submit\” id=\”btn\”>
</form>
</body>
<script src=\”./jquery.js\”></script>
<script>
//提前写好函数，调用函数需要传参
function callback(data){
alert(data);
}
//动态添加script标签及src属性
$(\’#btn\’).on(\’click\’,function(){
var sc = document.createElement(\’script\’);
sc.src = \’http://soul:8888/kuayu?cb=callback\’;
$(\’head\’).append(sc);
})
</script>
js：
var http = require(\’http\’);
var url = require(\’url\’);
var server = http.createServer();
server.listen(\’8888\’,function(){
console.log(\’8888\’);
});
server.on(\’request\’,function(req,res){
var urls = url.parse(req.url,true);
if(urls.pathname == \’/kuayu\’){
res.end(\’callback(\”jsonp\”)\’);//返回的数据需是前端定义的函数调用的形式
}
});
运行结果：
总结一下：
jsonp的一个要点就是允许用户传递一个callback参数给服务端， 然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据， 这样客户端就可以随意定制自己的函数来自动处理返回数据了。
发现凡是拥有\”src\”这个属性的标签都拥有跨域的能力，比如script、img、iframe； src 的能力就是把远程的数据资源加载到本地(图片、JS代码等);
2.cors
cors跨域的核心点是在服务端代码中设置一个响应头即可
res.setHeader(\’Access-Control-Allow-Origin\’,\’*\’);
html：
<body>
<form action=\”/\” method=\”post\” enctype=\”multipart/form-data\” id=\”form\”>
<input type=\”text\” name=\”xinxi\” id=\”info\”><br>
<input type=\”button\” value=\”提交\” name=\”submit\” id=\”btn\”>
</form>
</body>
<script src=\”./jquery.js\”></script>
<script>
$(\’#btn\’).on(\’click\’, function () {
$.ajax({
url: \’http://soul:8888/kuayu\’,
type:\’delete\’,
async:false,
success: function (data) {
alert(data);
},
})
})
</script>
js代码：
<body>
<form action=\”/\” method=\”post\” enctype=\”multipart/form-data\” id=\”form\”>
<input type=\”text\” name=\”xinxi\” id=\”info\”><br>
<input type=\”button\” value=\”提交\” name=\”submit\” id=\”btn\”>
</form>
</body>
<script src=\”./jquery.js\”></script>
<script>
$(\’#btn\’).on(\’click\’, function () {
$.ajax({
url: \’http://soul:8888/kuayu\’,
type:\’delete\’,
async:false,
success: function (data) {
alert(data);
},
})
})
</script>
效果：
很多人也认为使用CORS解决跨域很简单，只需要在服务器添加响应头 “ Access-Control-Allow-Origin ：* ” 就可以了，
其实不然，因为在CORS中，所有的跨域请求被分为了两种类型，一种是简单请求，一种是复杂请求 (严格来说应该叫‘需预检请求\’)；简单请求与普通的ajax请求无异；但复杂请求，必须在正式发送请求前先发送一个OPTIONS方法的请求已得到服务器的同意，若没有得到服务器的同意，浏览器不会发送正式请求；
满足以下所有条件，被视为简单类型的请求：
1：请求方法必须是 GET、HEAD、POST中的一种，其他方法不行；
2：请求头类型只能是 Accept、Accept-Language、Content-Language、Content-Type，添加其他额外请求头不行；
3：请求头 Content-Type 如果有，值只能是 text/plain、multipart/form-data、application/x-www-form-urlencoded 中的一种，其他值不行；
4：请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器；
5：请求中没有使用 ReadableStream 对象。（以上摘自西岭老湿微信公众号）
总结一下：
如果请求方式为get和post简单请求，则只需要设置响应头：res.setHeader(\’Access-Control-Allow-Origin\’,\’*\’);来允许某一个域 或者 所有域进行数据共享；
若是其他方式的请求，会在发送真正的请求之前发送一个options请求，通过options请求里设置：res.setHeader(\’Access-Control-Allow-Methods\’, \’DELETE\’)，
告知服务器正式请求会使用哪一种 HTTP 请求方法。
总结
以上所述是小编给大家介绍的Ajax跨域问题及解决方案（jsonp，cors）,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对悠久资源网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章:
- SpringBoot跨域Jsonp和Cors的方法
- 跨域解决之JSONP和CORS的详细介绍
- 跨域请求两种方法 jsonp和cors的实现
- 快速解决跨域请求问题:jsonp和CORS
- 跨域请求的完美解决方法(JSONP, CORS)
- 简单易懂的JSONP和CORS跨域方案详解
