ajax中的跨域问题

指的是域名

域名对应的是一个ip地址,域名与ip地址的关系存储在域名解析系统中(DNS)

跨域

例如: 有一个服务器A,有一个服务器B,当浏览器从服务器A上面请求资源并渲染完毕之后,再操作该页面的时候发送了另一个请求到服务器B,这个行为就称为跨域请求资源

比较协议、域名、端口号三者有任意不同的地方,就可以判定为跨域

同源策略

浏览器有一个同源策略不允许跨域请求资源,但是静态资源是不受同源策略的影响

JSONP

jsonp(json + padding)是一种跨域请求资源的方式

跨域请求的实现就是利用静态资源不受同源策略影响的特点,例如img,script标签都是可以的

我们可以利用script表现无视同源策略的特点,将该标签上的src指向目标服务器上的接口(src属性指向请求的地址)

步骤:

  向目标服务器发送一个方法名称以及数据,

  服务器接收数据,并返回数据(要放在方法中)

  客户端定义好该方法,让方法去执行,即可解决跨域

A服务器下的前端代码:

注意: 提前声明的函数一定要在引入跨域请求script标签之前声明,因为script标签的加载是同步的过程,且页面中所有的script标签是共享作用域的,函数的声明会被提升)

B服务器后端代码:

JSONP的优点: 兼容性好,简单易用,支持浏览器与服务器双向通信

JSONP的弊端: 必须需要跨域的服务器配合(后端代码返回的数据需将数据放在方法中执行)

          只支持GET请求

jQuery 中的 JSONP

使用方式:

$.ajax({

  url: 请求的路径

  type: 请求的方式

  dataType: "jsonp"

  jsonpCallback: 指定回调函数的名称

  success: 成功时候执行的回调函数

})

iframe设置代理模板解决ajax跨域问题:

iframe 元素会创建包含另外一个文档的内联框架(即行内框架),通俗来说就是可以在一个页面中嵌入另外一个页面

例如一个html页面嵌入百度

在html中,通过iframe定义框架,可以引入其它页面(有跨域问题,不能访问其它域上一层框架)

步骤:

在A域中,通过iframe引入B域的页面

在B域服务器端,将请求重定向到A域的页面(代理模板)中

在A域中,通过代理模板解析数据,并执行A域的方法,实现跨域请求数据的获取

注意:需要B域服务器端的配合:重定向配合。

html5 跨域(服务器跨域设置)

一旦服务器设置了允许跨域,ajax也可以实现跨域请求,更改的是服务器的配置。

服务器设置请求头:

  res.setHeader('Access-Control-Allow-Origin''*');
  res.setHeader('Access-Control-Allow-Methods''GET,PUT,POST,DELETE');
  res.setHeader('Access-Control-Allow-Headers''Content-Type');
  res.setHeader('Access-Control-Allow-Credentials''true');

例如前端发送跨域请求:

B域服务器设置请求头:

原文地址:https://www.cnblogs.com/yess/p/14755538.html