跨域问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨域问题相关的知识,希望对你有一定的参考价值。


 什么是跨域?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对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-urlencodedmultipart/form-datatext/plain

  

 

  

  

 

以上是关于跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段

解决跨域问题代码

跨域问题

PHP后台代码解决跨域问题

JAVA解决前端跨域问题。

PHP中运用jQuery的Ajax跨域调用实现代码