跨域简单介绍

浏览器的两种请求方式

浏览器将请求分为两大类:简单请求(simple request)和非简单请求(not-so-simple request)

简单请求(需要同时满足以下两大条件)

请求方法是以下三种方法之一
HEAD
GET
POST
HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
非简单请求(凡是不是简单请求的,就是非简单请求)

非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或者DELETE,或者content-type是application/json。非简单请求会在正式通信之前,增加一次HTTP的查询请求,称为“预检”请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。


简单请求模式

浏览器直接发送跨域请求,并在请求头中携带Origin的头,表明这是一个跨域的请求。 服务器端接到请求后,会根据自己的跨域规则,通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头,来返回验证结果。

在这里插入图片描述

应答中携带了跨域头 Access-Control-Allow-Origin。使用 Origin 和 Access-Control-Allow-Origin 就能完成最简单的访问控制。本例中,服务端返回的 Access-Control-Allow-Origin: * 表明,该资源可以被任意外域访问。如果服务端仅允许来自 http://www.aliyun.com 的访问,该首部字段的内容如下:

Access-Control-Allow-Origin: http://www.aliyun.com

现在,除了 http://www.aliyun.com ,其它外域均不能访问该资源。


预先请求模式

浏览器在发现页面发出的请求非简单请求,并不会立即执行对应的请求代码,而是会触发预先请求模式。预先请求模式会先发送Preflighted requests(预先验证请求),Preflighted requests是一个OPTION请求,用于询问要被跨域访问的服务器,是否允许当前域名下的页面发送跨域的请求。在得到服务器的跨域授权后才能发送真正的HTTP请求。

OPTIONS请求头部中会包含以下头部:Origin、Access-Control-Request-Method、Access-Control-Request-Headers。 服务器收到OPTIONS请求后,设置Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers、Access-Control-Max-Age头部与浏览器沟通来判断是否允许这个请求。 如果Preflighted requests验证通过,浏览器才会发送真正的跨域请求。
在这里插入图片描述

请求中的跨域头 Access-Control-Request-Method 告知服务器,实际请求将使用 GET 方法。 请求中的跨域头 Access-Control-Request-Headers 告知服务器,实际请求将携带两个自定义请求首部字段:x-ca-nonce 与 content-type。服务器据此决定该实际请求是否被允许。
应答中的跨域头 Access-Control-Allow-Methods 表明服务器允许客户端使用 GET 方法发起请求。值为逗号分割的列表。
应答中的跨域头 Access-Control-Allow-Headers 表明服务器允许请求中携带字段 x-ca-nonce 与 content-type。与 Access-Control-Allow-Methods 一样,Access-Control-Allow-Headers 的值为逗号分割的列表。
应答中的跨域头 Access-Control-Max-Age 表明该响应的有效时间为 86400 秒,也就是 24 小时。在有效时间内,浏览器无须为同一请求再次发起预检请求。请注意,浏览器自身维护了一个最大有效时间,如果该首部字段的值超过了最大有效时间,将不会生效。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios 是一个用于发送 HTTP 请求的 JavaScript 库,可以用于在客户端和服务器之间进行数据传输。当客户端使用 axios 进行跨域请求时,可能会遇到异步请求没有返回值的问题。下面我将简单介绍一下 axios 跨域请求没有返回值的可能原因和解决方法。 1. 同源策略:浏览器的同源策略限制了在不同源之间传输数据。即使在服务器端设置了允许跨域请求的头部信息,浏览器也会阻止返回值的接收。解决方法是在服务器端设置相应的跨域许可头部,如 Access-Control-Allow-Origin,同时还需要确保服务器返回的数据被正确解析。 2. 预检请求:对于某些复杂的跨域请求,浏览器会在发送实际请求之前发送一个 OPTIONS 预检请求。服务器需要正确处理这个预检请求,并返回允许跨域的头部信息,否则实际请求不会被发送,也就没有返回值。解决方法是在服务器端正确处理预检请求,确保返回合适的响应头部信息。 3. 代理服务器:如果不是真正的跨域请求,而是通过代理服务器转发请求的话,可能会出现没有返回值的问题。这种情况下,需要确保代理服务器的配置正确,并且服务器返回的数据能够正确传递给客户端。 总结来说,axios 跨域请求没有返回值的原因很可能是受到同源策略的限制,或者在服务器端的设置或代理服务器配置上存在问题。可以通过设置跨域许可头部、正确处理预检请求,或检查代理服务器的配置来解决这个问题。同时,还需要确保服务器返回的数据能够被客户端正常解析和接收。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值