关于跨域请求的处理

本文详细解释了浏览器的同源策略,区分了同源与跨域的概念,并介绍了三种常见的跨域处理方式:代理、CORS和jsonp,强调了jsonp因其简单易用和适合GET请求而在企业中的广泛应用。
摘要由CSDN通过智能技术生成

概念

  1. 同源:
    同源是指在一般情况下,浏览器发出请求访问的资源都是在相同的协议、域名、和端口号下的,这样的请求即为默认同源策略的访问。
  2. 跨域:
    由于浏览器的同源策略,凡是发送请求 url 的协议、域名、端口号三者之间任意一个(或者多个)与当前页面地址不同即为跨域。

示例

  1. 同源时:
    当前页面
    http://192.168.1.1:8080/xxx/xxx.jsp
    发出请求:
    http://192.168.1.1:8080/xxx/yyy.do
    以上我们发出的请求的协议,ip,端口号完全相同,就是发出的是同源请求的操作。
  2. 跨域时:
    当前页面
    http://192.168.1.1:8080/xxx/xxx.jsp
    发出请求:
    https://192.168.1.1:8080/xxx/yyy.do 协议不同
    http://192.168.1.2:8080/xxx/yyy.do
    或者myweb.com 访问baidu.com 域名不同
    http://192.168.1.1:8088/xxx/yyy.do 端口号不同
    以上请求协议,ip,端口号三大要素均有不同,需要进行跨域请求的操作。

处理方式

  1. 代理方式
    代理用于将请求发送给后台服务器,通过服务器来发送请求,然后将请求的结果传递给前端。通过nginx 代理来实现操作。
  • 优点:跨域服务稳定
  • 缺点:在使用到跨域处理的时候,必须要事先搭建nginx 服务的代理
  1. CORS 方式 [常用]
    CORS 是w3c 标准的方式,通过在web 服务器端的设置响应头 Access-Control-Alow-Origin 来指定哪些域可以访问本域的数据。
  • 优点:使用简单,支持基于HTTP 协议的所有请求方式
  • 缺点:跨域服务响应稍慢
  1. jsonp 方式
    通过动态插入一个script 标签。浏览器对 script 的资源引用没有同源限制,同时资源加载到页面后回立即执行。
  • 优点:使用简单,跨域服务响应快,获取的数据是我们最常见的 json
    格式的数据。
  • 缺点:只能发送get 请求,无法发送post 请求

由于在开发中发出跨域请求的目的通常是为了取得指定的资源数据,所以一般都是发出 get 请求,由于 jsonp 的形式使用简单,而且关于接收的响应数据,是程序员使用最多的 json 格式的数据,所以该形式在 企业中应用的比较广泛。

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿胡爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值