跨域问题

Posted 2020-10-11

 什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

所谓同源是指，域名，协议，端口均相同。例：

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

解决办法：

1.jsonp方式

　　jsonp原理：本质并不是ajax,只是执行了跨域JS，html中，所有带src属性的标签都可以跨域，所以可以通过script加载基它域的一段动态脚本，这段动态脚本包含了想要的数据。

　　使用方法1：$.getJSON(‘url?callback=?‘,data,function(data){

　　　　　　　　　　console.log(data);

　　　　　　　})

　　使用方法2：$.ajax({

　　　　　　　　　　url:‘url?callback=?‘,

　　　　　　　　　　dataType:‘jsonp‘

　　　　　　　　}).done(function(data){

　　　　　　　　　　console.log(data)

　　　　　　　　})

　　以上两种参数名称为callback,值为随机值

　　

　　使用方法3：$.ajax({

　　　　　　　　　　url:url,

　　　　　　　　　　dataType:‘jsonp‘，

　　　　　　　　　　jsonp:‘aa‘,　　　　　//指定参数名称

　　　　　　　　　　jsonpcallback:‘bbbb‘//指定参数值

　　　　　　　　}).done(function(data){

　　　　　　　　　　console.log(data)

　　　　　　　　})

　　不足：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

2.CORS方式

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

1) 请求方法是以下三种方法之一：

• HEAD
• GET
• POST

（2）HTTP的头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain