跨域的几种解决方案

阅读：评论：0

跨域的几种解决方案

跨域

1.Jsonp跨域

什么是JSONP

jsonp是民间提出的一种跨域解决方案，通过客户端的script标签发送请求方式。

原理就是通过添加一个<script>标签，向服务器请求Json数据，这样就不受同源策略的限制，服务器接收到请求后，将数据放在一个callback({返回数据})传回来，比如axios。不过只支持GET请求，而且不安全，可能遇到XSS攻击，不过它的好处就是向老浏览器或不支持CORS的网址请求数据。
服务器：将服务端返回数据封装到指定的函数中返回callback({返回数据})
客户端：不管是我们的script标签，还是src还是img标签的src，或者说link标签的href，他们没有被同源策略所限制，比如我们有时候可能使用一个网络上的图片，就可以请求得到：所以利用同源策略的漏洞，将访问地址放在下面的标签路径中。

<script src = "www.baodu"></script>, <img src=""/> ,<link href=""/>

来解决跨域问题。

JSONP原理

JSOINP的实现

<img src = xxx>

<link href = xxx>

<script src = xxx>

获取客户端发送过来的回调参数的名字
得到要通过JSONP形式发送给客户端的数据
根据前两部得到的数据，拼接一个函数调用的字符串
把上一步拼接得到的字符串，响应给客户端的<script>标签进行解析执行。

   const express = require('express')const app = express()const port = 3000//路由配置("/user",(req,res)=>{//1.获取客户端发送过来的回调函数的名字let fnName = req.query.callback;//2.得到要通过JSONP形式发送给客户端的数据const data = {name:'tom'}//3.根据前两步得到的数据，拼接出个函数调用的字符串let result = `${fnName}({name:"tom"})`//4.把上步拼接得到的字符串，响应给客户端的<script> 标签进行解析执行res.send(result);})app.listen(port, () => {console.log(`Example app listening on port ${port}`)})

   <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSONP简单实现</title></head><body><button id="btn">点击发送请求</button><script>function getJsonpData(data) {console.log("获取数据成功")console.log(data) //{name:'tom'}}var btn = ElementById("btn");lick = function () {//创建script标签var script = ateElement("script");script.src = 'localhost:3000/user?callback=getJsonpData';document.body.appendChild(script);load = function () {veChild(script)}}</script></body></html>

反向代理和代理很像，都是再服务器和服务器中间假设一个中间代理服务器，不同点在于代理是客户端发送请求，反向代理是代表服务端接受客户端发送的请求。

原理

3.代理转发

Vue就是使用的代理转发，在vue中我们可以在fit.js中配置代理服务器。代理服务器和客户端同源，而服务器和服务器之间的网络请求并不会收到浏览器的拦截，所以这也是此方法可行的原因。

4.document.domain + iframe

注意：只能在主域相同的时候，才能使用该方法。

父窗口：(.html)

<iframe id="iframe" src=".html"></iframe>
<script>document.domain = 'domain';var user = 'admin';
</script>

子窗口：(.html)

document.domain = 'domain';
// 获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user);

本文发布于:2024-02-03 02:39:42，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170689918048103.html

上一篇：[HTC教程]手把手HTC设备安装教程安装指南

下一篇：古城信阳小青年的两大发明

标签：几种解决方案

留言与评论（共有 0 条评论）