Ajax跨域问题及解决方案

跨域

跨域有三个条件，任意一个都是跨域

1:不一致的服务器端口2:不一致的协议3:不一致的域名

解决方案：

1.jsonp

尽量将数据动态加载到远程服务器上js格式的文本代码段中，供客户端调用和进一步处理；通过在前台动态添加脚本标签和src属性，看起来非常类似于ajax，但与ajax无关；为了方便使用和交流，一种非正式的传输协议逐渐形成，称为jsonp。

代码如下：

html:

正文表单操作='/'方法=' 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=' submit ' name=' submit ' id=' BTN '/Form/正文脚本src=' http:/jquery . js '/script script//提前写好函数，通过传递函数回调(data) {alert (data)调用函数；}//动态添加脚本标记和src属性$ ('# BTN ')。on ('click '，function () {var sc=document。create element(' script ')；sc . src=' http://soul :8888/kuayu？cb=回调'；$('head ')。追加(sc)；})/scriptjs:

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 URL=URL . parse(req . URL，true)；if(URLs . pathname=='/kuayu '){ RES . end(' callback(' jsonp ')')；//返回的数据应该是前端定义的函数调用形式} })；运行结果：

总而言之：

jsonp的一个关键点是允许用户向服务器传递一个回调参数，然后当服务器返回数据时，回调参数会作为函数名来包装JSON数据，这样客户端就可以自定义自己的函数来自动处理返回的数据。

发现所有属性为‘src’的标签都具有跨域能力，如script、img、iframe；src的能力是在本地加载远程数据资源(图片、JS代码等)。);

2.cors

cors跨域的核心是在服务器代码中设置响应头

res.setHeader('访问控制-允许-源'，' *)；

html:

正文表单操作='/'方法=' post ' enctype=' multipart/Form-data ' id=' Form ' input type=' text ' name=' xinxi ' id=' info ' br input type=' button ' value=' submit ' name=' submit ' id=' BTN '/Form/body script src=' http 3360。/jquery . js '/script script $(' # BTN ')。on('click '，function () { $。Ajax({ URL : ' http://soul :888/kuayu '，type:'delete '，async:false，success:函数(数据){ alert(数据)；}，}) })/scriptjs代码：

正文表单操作='/'方法=' post ' enctype=' multipart/Form-data ' id=' Form ' input type=' text ' name=' xinxi ' id=' info ' br input type=' button ' value=' submit ' name=' submit ' id=' BTN '/Form/body script src=' http 3360。/jquery . js '/script script $(' # BTN ')。on('click '，function () { $。Ajax({ URL : ' http://soul :888/kuayu '，type:'delete '，async:false，success:函数(数据){ alert(数据)；}，})})/脚本效果：

很多人也觉得用CORS解决跨域很简单，只需要在服务器上添加响应头“访问控制-允许-原点：*”就可以了。

其实不是，因为在CORS，所有的跨域请求都分为两种类型，一种是简单请求，一种是复杂请求(严格来说，应该叫‘预览请求’)；简单的请求和普通的ajax请求没有什么不同；但是，对于复杂的请求，有必要在正式发送请求之前发送一个OPTIONS方法。请求已被服务器批准，未经服务器批准，浏览器不会发送正式请求；

满足以下所有条件的请求被视为简单类型：

1:请求方式必须是GET、HEAD、POST中的一种，其他方式不能使用；

2:请求头类型只能是接受、接受语言、内容语言和内容类型，不能添加其他额外的请求头。

3:如果请求头的Content-Type存在，则该值只能是text/plain、multipart/form-data和application/x-www-form-URL encoded中的一个，其他值不能使用；

4:没有为请求中的任何XMLHttpRequestUpload对象注册事件侦听器；

5:请求中未使用ReadableStream对象。(以上摘自西陵老湿微信微信官方账号)

总而言之：

如果请求方式是简单的get和post请求，只需要设置响应头：RES . setheader(' access-control-allow-origin '，' * ')；允许某个域或所有域共享数据；

在其他请求的情况下，将在发送实际请求之前发送选项请求，并在选项请求中设置：RES . setheader(' access-control-allow-methods '，' delete ')。

告诉服务器哪个HTTP请求方法将用于正式请求。

摘要

以上是边肖介绍的Ajax跨域问题及解决方案(jsonp，cors)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！