前端跨域方式 秒速五厘米 2024-03-26 13:37 28阅读 0赞 ## ![46a3cf301acf4be8a017afa9063c3397.png][] ## 同源策略:协议、端口号、主机都一致允许交互,这是浏览器的安全机制。 ## 一、jsonp跨域 ## JSONP 是一个非官方的跨域解决方案,缺点: 只支持 get ,不支持 post 。 原理:借助了script标签中的src不受限于同源策略。 客户端和服务器端常用的数据格式就是 JSON 格式了,我们可以把数据的格式设置成 json 格式,由 于我们利用 script (src属性)获取数据, script 会被执行,所以服务器给真实数据外包一个函数, 在外包一层作为传输用的 JSON 格式的数据。客户端收到之后就行调用函数获取数据。 语法,jsonp 包含三部分: jsonp ( url , data (参数), options (回调函数,可以搭配 promise 来使用))【也可以用jq实现(略)】 //前端发送请求,给发送请求的代码绑定的事件函数: // 绑定事件 鼠标失去焦点 input.onblur = function () { // 获取用户的输入值 let username = this.value // 向服务器端发送请求 检测用户是否存在 // 1. 创建script标签 const script = document.createElement('script') // 2. 设置标签的src属性 script.src = 'http://127.0.0.1:8000/checkusername' // 3. 将script插入到文档中 不插入到文档中浏览器是不会发送请求的 document.body.appendChild(script) } //后端具体操作nodejs的server.js中 // checkusername app.all("/checkusername", (request, response) => { // response.send("hello jsonp server"); //这样返回的话浏览器解析不了 // response.send("console.log('hello jsonp-server')"); //返回的应该是一段js代码 是一个函数的调用 // 标准的样式 const data = { exist: 1, message: "用户名已经存在", }; // 将数据转换成字符串 let str = JSON.stringify(data); // 返回结果 response.end(`handle(${str})`); //返回的响应体 handle({"name":"汪汪队救火队长"}) }); ## 二、跨域资源共享(CORS) ## CORS ( Cross-Origin Resource Sharing ),跨域资源共享。 CORS 是官方的跨域解决方案,它的 特点是不需要在客户端做任何特殊的操作,完全在**服务器中进行处理**,支持 get 和 post 请求。 过程有点像TCP三次握手: 浏览器必须首先使用 OPTIONS 方法发起一个预检请 求(preflight request),从而获知服务端是否允许该跨源请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证 相关数据)。 ## 三、WebSocket协议跨域 ## WebSocket协议是HTML5的新协议。能够实现浏览器与服务器全双工通信,同时允许跨域,是服务端推送技术的一种很好的实现。webSocket本身不存在跨域问题,所以我们可以利用webSocket来进行非同源之间的通信。【了解】 > http协议下,服务器不会主动向客户端发起请求,只会响应。 > > 在这种状态下,如果要网页主动刷新反馈,如页游这种,会一直更新数据的情况,一种常见方案是定时向服务器发请求来刷新,用户层面没感知,但其实一直发请求实际是由带宽占用的; > > 方案二,长轮询,客户端发起请求后超时时间设置的比较长(如1min),就发送一次请求后若服务器端不是立刻有新内容推送过来还能响应。 > > http本质还是一个半双工协议,因此像游戏这种需要大量主动发送数据的场景还是不适用,而websocket协议就比较解决这个问题。 > > websocket只在建立连接的时候借用了http,然后就与http没有关系了 > > [这篇文章详细说啥是websocket][websocket] ## 四、nginx代理跨域 ## > 原理:同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不存在跨越问题。 > > 实现:通过nginx配置代理服务器(域名与test1相同,端口不同)做跳板机,反向代理访问test2接口,且可以修改cookie中test信息,方便当前域cookie写入,实现跨域登录。其实就像开发时跨域的原理。 ## ![a81f700ae3394b60aa8c3e4affe98380.png][] ## 配置: ![ecdad7529cb64910814a9fda372a3a07.png][] ## 五、开发时跨域,devServer.proxy(vue-cli代理转发) ## > 浏览器是禁止跨域的,但是服务端不禁止,在本地运行**npm run dev等命令时实际上是用node运行了一个服务器**,因此**proxyTable实际上是将请求发给自己的服务器,再由服务器转发给后台服务器**,做了亦曾代理,因为不会出现跨域问题。 > > 我们可以在本地弄个服务器, 然后用服务器请求后台服务器接口地址 vuecli脚手架, 启动了一个webpack开发服务器, 它就能做代理转发 而且前端和这个服务器是同源的都是8080端口,需要修改webpack开发服务器的配置即可 那么: > 1.代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题,可以直接发送请求 > > 2.代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制,可以直接发送请求 > > 这样,我们就可以通过中间这台服务器做接口转发,在开发环境下解决跨域问题,看起来好像挺复杂,其实vue-cli已经为我们内置了该技术,我们只需要按照要求配置一下即可。 那就是这样: devServer: { proxy: { // http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html '/api': { // 请求相对路径以/api开头的, 才会走这里的配置 target: 'http://c.m.163.com', // 后台接口域名 我们要代理的真实的接口地址 changeOrigin: true, // 改变请求来源(欺骗后台你的请求是从http://c.m.163.com) pathRewrite: { '^/api': '' // 因为真实路径中并没有/api这段, 所以要去掉这段才能拼接正确地址转发请求 } } } } //也就是说,客户端给代理服务器发送请求,客户端然后再向后端请求 [46a3cf301acf4be8a017afa9063c3397.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6a4fa83eee824aaaaea47131b4c6f7a4.png [websocket]: https://blog.csdn.net/qq_54773998/article/details/123863493?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167722053116800182181946%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167722053116800182181946&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-123863493-null-null.142%5Ev73%5Econtrol_1,201%5Ev4%5Eadd_ask,239%5Ev2%5Einsert_chatgpt&utm_term=WebSocket&spm=1018.2226.3001.4187 [a81f700ae3394b60aa8c3e4affe98380.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f57cb9d1889a42de8ad2b21350eda23b.png [ecdad7529cb64910814a9fda372a3a07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/58d94dbbf8e64ae496c18c83cc1e9836.png
相关 前端跨域方式 ![46a3cf301acf4be8a017afa9063c3397.png][] 同源策略:协议、端口号、主机都一致允许交互,这是浏览器的安全机制。 一、jsonp 秒速五厘米/ 2024年03月26日 13:37/ 0 赞/ 29 阅读
相关 前端多种跨域方式实现原理详解 跨域是我们在项目中经常遇到的,前后端数据交互经常碰到请求跨域,首先我们来想一下为什么会有跨域这个词的出现?本文带你来探讨一下以下几个问题: 跨域是什么? 为什么要 小灰灰/ 2023年07月24日 02:20/ 0 赞/ 74 阅读
相关 前端跨域 什么是跨域 同源策略是一种约定,它是浏览器的最核心也是最安全的功能,如果缺少同源策略,浏览器很容易受到xss,csrf等攻击。所谓的同源的就是“协议+域名+端口”,即使两个 ╰+攻爆jí腚メ/ 2023年01月07日 07:21/ 0 赞/ 164 阅读
相关 前端跨域问题 跨域 1、域名地址组成 域名组成图如下:域名组成.png ![这里写图片描述][SouthEast] 当协议、主域名、端口号中任意一个不相同 不念不忘少年蓝@/ 2022年07月12日 12:36/ 0 赞/ 216 阅读
相关 前端跨域相关 转自:[前端跨域(全)][Link 1] 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 布满荆棘的人生/ 2022年05月29日 09:16/ 0 赞/ 212 阅读
相关 跨域方式 常用的: 1. jsonP:通过script标签调用不同域的js把参数带回来 2. CORS:通过服务端在响应头设置Access-Control-AllowOrigin字 清疚/ 2022年05月11日 13:18/ 0 赞/ 219 阅读
相关 前端跨域 什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本。它是由ajax网络通信限制造成的,是浏览器施加的安全限制。 所谓同源是指,域名,协议,端口均相同,不明白没关系,举 今天药忘吃喽~/ 2022年04月22日 01:54/ 0 赞/ 201 阅读
相关 web前端之“神秘”的跨域方式 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl ﹏ヽ暗。殇╰゛Y/ 2021年09月18日 15:04/ 0 赞/ 191 阅读
相关 前端跨域 前端跨域 一、什么是跨域 二、网址解析: 三、解决跨域 1.src 2.jsonp 3.jq中的jsonp 雨点打透心脏的1/2处/ 2021年09月07日 06:09/ 0 赞/ 390 阅读
还没有评论,来说两句吧...