跨域及其解决方法

跨域:

因为浏览器出于安全考虑,有同源策略。也就是说,如果协议、域名或者端口有一个不同就是跨域,Ajax 请求会失败。

明确几个点:

  • 浏览器才会有跨域的限制,服务器之间跨域不会限制
  • 不同协议会跨域,不同域名互相请求会跨域,同域名下不同端口会跨域

解决办法

JSONP

JSONP 的原理很简单,就是利用 < script > 标签没有跨域限制的漏洞。通过 < script> 标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时 ,注意:这里必须使用scipt标签,否则返回的数据不会被当作js执行

后端配置返回的为一个函数运行function()的字符串形式
在这里插入图片描述
前端如下:注册 f 函数,在src第十行的时候,会请求改地址,后端解析callback,赋值给funcname,然后返回一个 " funcname(‘你好’) " 的字符串数据,然后在这个script标签里面就会运行 funcname(‘你好’),funcname又指向了f 函数,所以就能成功运行了,

在这里插入图片描述

注意
JSONP原理是动态生成script标签,通过src属性加载后端返回的数据并运行的方法,JSONP只限于GET请求,不支持POST

b站视频链接

CORS

CORS需要浏览器和后端同时支持
浏览器会自动进行 CORS 通信,实现CORS通信的关键是后端。只要后端实现了 CORS,就实现了跨域。
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。
比如以下用node+express的后端处理:
在这里插入图片描述
设置了res.header(‘Access-Control-Allow-Origin’,’*’)就代表该后端的数据允许跨域,并且 * 为通配符,代表所有来源都可以访问本服务器资源。
b站视频链接

Proxy 代理

上面讲到跨域的限制是浏览器的,不同端口的服务器之间可以进行访问,不受限制,那么可以设置一个中间服务器,让它处于浏览器的同一个端口,转接中间的数据,就可以了
在这里插入图片描述
要进行一些设置,比如target,pathRewrite等
在这里插入图片描述
代理又分正向代理和反向代理
参考链接1
参考链接2

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值