位置: IT常识 - 正文

最常见的六种跨域解决方案(跨的基本功有哪些)

编辑:rootadmin
最常见的六种跨域解决方案 目录:前言:什么是跨域?JSONPCORS搭建Node代理服务器Nginx反向代理postMessageWebsocket总结前言:什么是跨域?

推荐整理分享最常见的六种跨域解决方案(跨的基本功有哪些),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:常见的跨域方式,跨是什么,跨距名词解释,简述常见的跨域及其解决方案,简述五种常见的跨域解决方法,常见的跨域方式,跨的基本功有哪些,简述常见的跨域及其解决方案,内容如对您有帮助,希望把文章链接给更多的朋友!

跨域就是当在页面上发送ajax请求时,由于浏览器同源策略的限制,要求当前页面和服务端必须同源,也就是协议、域名和端口号必须一致。 如果协议、域名和端口号中有其中一个不一致,则浏览器视为跨域,进行拦截。

1、JSONP方式解决跨域:

jsonp的原理就是利用了script标签不受浏览器同源策略的限制,然后和后端一起配合来解决跨域问题的。

具体的实现就是在客户端创建一个script标签,然后把请求后端的接口拼接一个回调函数名称作为参数传给后端,并且赋值给script标签的src属性,然后把script标签添加到body中,当后端接收到客户端的请求时,会解析得到回调函数名称,然后把数据和回调函数名称拼接成函数调用的形式返回,客户端解析后会调用定义好的回调函数,然后在回调函数中就可以获取到后端返回的数据了。

页面中可能会存在多个jsonp,所以可以封装一个jsonp方法,客户端代码如下:

<script> // 封装一个jsonp函数 function jsonp({url, params, callback}) { return new Promise((resolve, reject) => { // 定义回调函数 window[callback] = function(data) { resolve(data) } const script = document.createElement('script') // 创建script标签 params = {...params, callback} const arr = [] for(const key in params) { if(params.hasOwnProperty(key)) { // 判断当前key是否是params对象自身的属性,有可能会是原型上的属性,所以需要判断一下 arr.push(`${key}=${params[key]}`) } } url += `?${arr.join('&')}` // 拼接参数 script.async = true script.src = url document.body.appendChild(script) script.onload = () => { document.body.removeChild(script) } }) }// 使用jsonp jsonp({ url: 'http://127.0.0.1:8081/user', params:{id: '1'}, callback: 'getUserData' }).then(res => { console.log('res:', res) })</script>

服务端代码如下(nodeJS):

const http = require('http')const url = require('url')// 创建serverconst server = http.createServer()// 监听http请求server.on('request', (req, res) => { // 获取客户端传来的回调函数名称 const {callback} = url.parse(req.url, true).query const user = { // 模拟返回数据 id: 1, name: 'zhangsan', age: 12 } // 把数据和回调函数名称拼接成函数调用的方式返回 const result = `${callback}(${JSON.stringify(user)})` res.end(result)})// 设置监听端口server.listen(8081, function() { console.log('server is running on 8081 port!')})

jsonp的优点就是兼容性好,可以解决主流浏览器的跨域问题,缺点是仅支持GET请求,不安全,可能遭受xss攻击。

2、CORS方式解决跨域:

cors是跨域资源共享,是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其它 origin(域,协议和端口),使得浏览器允许这些 origin 访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS,所以这种方式只要后端实现了CORS,就解决跨域问题,前端不需要配置。

服务端设置Access-Control-Allow-Origin响应头即可,服务端代码如下:

const http = require('http')const url = require('url')// 创建serverconst server = http.createServer()// 定义跨域访问白名单const authOrigin = ['http://127.0.0.1:5500']// 监听http请求server.on('request', (req, res) => { const user = { // 模拟返回数据 id: 1, name: 'zhangsan', age: 12 } const origin = req.headers.origin if(authOrigin.includes(origin)) { // 添加响应头,实现cors // res.setHeader('Access-Control-Allow-Origin', '*') // 允许所有的地址跨域访问 res.setHeader('Access-Control-Allow-Origin', origin) // 只有白名单中的地址才可以跨域访问 } res.end(JSON.stringify(user))})// 设置监听端口server.listen(8081, function() { console.log('server is running on 8081 port!')})

当客户端访问时服务端接口时,就可以看到响应头中服务端配置的Access-Control-Allow-Origin: CORS方式解决跨域问题比较常用,只需要后端配置响应头Access-Control-Allow-Origin,前端无需配置,实现简单。

3、搭建Node代理服务器解决跨域:

因为同源策略是浏览器限制的,所以服务端请求服务器是不受浏览器同源策略的限制的,因此我们可以搭建一个自己的node服务器来代理访问服务器。

大概的流程就是:我们在客户端请求自己的node代理服务器,然后在node代理服务器中转发客户端的请求访问服务器,服务器处理请求后给代理服务器响应数据,然后在代理服务器中把服务器响应的数据再返回给客户端。客户端和自己搭建的代理服务器之间也存在跨域问题,所以需要在代理服务器中设置CORS。

基本的工作流程如下: 客户端代码如下:

<!-- 引入axios发送请求 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script> // 简单封装一个axios向代理服务器发送请求 function proxyAxios(data) { return axios({ url: 'http://localhost:8081/proxyApi', // 请求自己搭建的node代理服务器的地址 method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded' }, data }) } // 使用node代理服务器向服务器发送请求 proxyAxios({ url: 'https://class.imooc.com/getadver',// 需要代理访问真实服务器的url method: 'GET', }).then(res => { console.log('res:', res) }).catch(err => { console.log(err) })</script>最常见的六种跨域解决方案(跨的基本功有哪些)

node服务器代码如下:

/**通过nodeJS搭建自己的代理服务器来解决跨域问题 */const axios = require('axios')const express = require('express')const bodyParser = require('body-parser')const app = express()// 使用第三方插件app.use(bodyParser.urlencoded({extended: false}))app.use(bodyParser.json())// 监听post请求,处理代理接口app.post('/proxyApi', (req, res) => { const {body} = req// 获取post请求的请求参数 let reqParams = {} for(const key in body) { reqParams = JSON.parse(key) // 获取到请求参数 } // 设置响应头 // 代理服务器设置CORS,允许跨域访问 res.setHeader('Access-Control-Allow-Origin', '*') res.setHeader('Access-Control-Allow-Methods', '*') // 允许所有的请求方式 const {url, method = "GET", ...resConfig} = reqParams || {} // node代理请求服务器 axios({ url, method, ...resConfig }).then(result => { const {status, headers, data} = result res.status(status) res.setHeader('content-type', headers['content-type']) res.end(JSON.stringify(data)) // 给客户端返回数据 }).catch(err => { res.end(JSON.stringify(err)) })})// 监听请求app.listen(8081, () => {console.log('服务启动成功,在8081端口监听请求....')})4、Nginx反向代理解决跨域:

nginx通过反向代理解决跨域也是利用了服务器请求服务器不受浏览器同源策略的限制实现的。

客户端请求nginx服务器,在nginx.conf配置文件中配置server监听客户端的请求,然后把location匹配的路径代理到真实的服务器,服务器处理请求后返回数据,nginx再把数据给客户端返回。大致流程如下: nginx.conf配置文件中的配置: 前端代码如下:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script> axios({ url: 'http://localhost:8082/api', // 向nginx服务器发送请求 method: 'get' }).then(res => { console.log('res:', res) }).catch(err => { console.log('err:', err) })</script>

最终要访问的服务端代码如下:

const express = require('express')const app = express()app.get('/api', (req, res) => { const user = { // 模拟返回数据 id: 1, name: 'zhangsan', age: 12 } res.end(JSON.stringify(user))})// 监听请求app.listen(8081, () => {console.log('服务启动成功,在8081端口监听请求....')})

nginx反向代理方式和node中间件代理方式的原理其实差不多,都是利用了服务器和服务器之间通信不受浏览器的同源策略的限制,但是node代理方式相对复杂一些,还要自己搭建一个node服务器,而用nginx只需要修改nginx.conf配置文件即可解决跨域问题。

5、postMessage方式解决跨域:

window.postMessage() 方法可以安全地实现跨源通信,此方法一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

主要的用途是实现多窗口,多文档之间通信:

页面和其打开的新窗口的数据传递多窗口之间消息传递页面与嵌套的 iframe 消息传递

具体的用法请查看:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

接下来实现一个页面与嵌套的 iframe 消息传递的示例:

index.html页面代码如下:http://127.0.0.1:5500

<body> <h2>index页面</h2> <iframe src="http://localhost:3000" frameborder="0" id="iframe" onload="load()" ></iframe></body><script> window.addEventListener('message', ev => { const {data, origin, source} = ev if(origin !== 'http://localhost:3000') return console.log('接收iframe页面发送的消息:', data) }) function load() { iframe.contentWindow.postMessage("给iframe页面发送的消息", "http://localhost:3000"); }</script>

iframe页面的代码如下:http://localhost:3000

<body> <h1>iframe嵌入的页面</h1></body><script> window.addEventListener('message', ev => { const {data, origin, source} = ev if(origin !== 'http://127.0.0.1:5500') return console.log('接收到index页面发送的消息:', data) source.postMessage('给index页面发送的消息', origin) })</script>

使用postMessage向其它窗口发送数据的时候需要注意的就是,应该始终指定精确的目标 origin,而不是 *,使用window监听message事件,接收其他网站发送的 message时,请始终使用 origin 和 source 属性验证发件人的身份。

6、Websocket方式解决跨域:

使用Websocket也可以解决跨域问题,因为WebSocket本身不存在跨域问题,所以我们可以利用webSocket来进行非同源之间的通信,

WebSocket 规范定义了一个在 Web 浏览器和服务器之间建立“套接字”连接的 API。 简单来说:客户端和服务器之间存在持久连接,双方可以随时开始发送数据。

WebSocket 的基本使用如下,前端代码:

<script> const ws = new WebSocket('ws://localhost:8081') // 当连接打开时,向服务器发送一些数据 ws.onopen = () => { ws.send('Hi!') // 使用send方法向服务端发送内容 } // 监听错误 ws.onerror = error => { console.log('WebSocket Error ' + error); }; // 监听服务端发送的数据 ws.onmessage = e => { console.log('Server: ' + e.data); };</script>

服务端代码如下:

// WebSocket服务const WebSocket = require("ws");const server = new WebSocket.Server({ port: 8081 });server.on("connection", function(socket) { // 监听客户端发送的消息 socket.on("message", function(data) { console.log('clent data:', data) socket.send(data); // 向客户端发送消息 });});

注意:

服务端需要通过npm install ws 来安装ws模块在使用ws的时候发现服务端接收到客户端的数据是二进制,而服务端给客户端返回的数据也是二进制, 解决这个问题的办法就是安装低版本的webSocket依赖,我之前安装的是8.8.1版本的就会出现这个问题,后来切换为7.3.0并重新npm i 和重新启动服务就可以解决这个问题了。 总结:jsonp的原理是利用了script标签不受浏览器同源策略的限制,img和link标签也是不受浏览器同源策略限制的。跨域是浏览器限制,服务端和服务端之间通信是不受浏览器同源策略限制的。所有跨域的解决方案都是需要服务端配合的。最常用的跨域解决方案是CORS、Node代理服务器和Nginx反向代理方式。postMessage更多的是用在多个文档,窗口之间发送数据。
本文链接地址:https://www.jiuchutong.com/zhishi/297588.html 转载请保留说明!

上一篇:用winform开发ChatGPT对话应用(winform开发技术有哪些)

下一篇:nvm安装与使用(nvm安装教程)

  • 把握用户的四个心理,做好短信营销(把握用户的四个基本要求)

    把握用户的四个心理,做好短信营销(把握用户的四个基本要求)

  • 小米watchs1pro如何绑定手机(小米watchs1pro如何刷机)

    小米watchs1pro如何绑定手机(小米watchs1pro如何刷机)

  • 华为nova7pro是5g手机吗(华为nova7Pro是曲屏的吗)

    华为nova7pro是5g手机吗(华为nova7Pro是曲屏的吗)

  • 淘宝举报盗图要有什么条件(淘宝举报盗图多久出结果)

    淘宝举报盗图要有什么条件(淘宝举报盗图多久出结果)

  • word字母右下角的数字怎么打出来(word字母右下角如何加上数字)

    word字母右下角的数字怎么打出来(word字母右下角如何加上数字)

  • oppo手机屏幕出现一道竖光线(oppo手机屏幕出现黑色方框)

    oppo手机屏幕出现一道竖光线(oppo手机屏幕出现黑色方框)

  • 怎样登录qq不用验证码(怎样登录qq不用扫码就能登录)

    怎样登录qq不用验证码(怎样登录qq不用扫码就能登录)

  • 换外屏原彩显示没了(换外屏 原彩)

    换外屏原彩显示没了(换外屏 原彩)

  • 华为的5g芯片叫什么(华为的5g芯片叫啥)

    华为的5g芯片叫什么(华为的5g芯片叫啥)

  • 读卡器可以当u盘给电脑做系统吗(读卡器可以当u盘用能放车上用吗)

    读卡器可以当u盘给电脑做系统吗(读卡器可以当u盘用能放车上用吗)

  • qq群投票被删怎么恢复(qq群投票不小心删除了可以恢复吗)

    qq群投票被删怎么恢复(qq群投票不小心删除了可以恢复吗)

  • u盘文件太大不能传怎么办(u盘文件太大不能传手机怎么办)

    u盘文件太大不能传怎么办(u盘文件太大不能传手机怎么办)

  • 猜你喜欢直播怎么关闭(播放猜你喜欢)

    猜你喜欢直播怎么关闭(播放猜你喜欢)

  • 苹果x指纹在哪里(苹果x指纹哪里设置)

    苹果x指纹在哪里(苹果x指纹哪里设置)

  • 华为手机怎么拷贝照片(华为手机怎么拷照片到电脑)

    华为手机怎么拷贝照片(华为手机怎么拷照片到电脑)

  • 58到家怎么注册接单(58到家怎么注册当保洁)

    58到家怎么注册接单(58到家怎么注册当保洁)

  • 苹果2代耳机有线和无线怎么区别(苹果2代耳机有定位吗)

    苹果2代耳机有线和无线怎么区别(苹果2代耳机有定位吗)

  • 优活手环怎么打开(怎么使用优活手环)

    优活手环怎么打开(怎么使用优活手环)

  • 微信黑名单上的人可以永久删除吗(微信黑名单上的人怎么恢复)

    微信黑名单上的人可以永久删除吗(微信黑名单上的人怎么恢复)

  • 苹果xsmax有nfc功能吗(苹果xsmax有nfc功能门禁卡)

    苹果xsmax有nfc功能吗(苹果xsmax有nfc功能门禁卡)

  • 手机静音qq电话会响吗(手机静音qq电话有声音吗)

    手机静音qq电话会响吗(手机静音qq电话有声音吗)

  • 电脑下载的文件在哪里(电脑下载的文件打不开怎么回事)

    电脑下载的文件在哪里(电脑下载的文件打不开怎么回事)

  • r15屏幕分辨率设置(r15屏幕分辨率多少)

    r15屏幕分辨率设置(r15屏幕分辨率多少)

  • mxf是什么格式(MXF是什么格式的文件)

    mxf是什么格式(MXF是什么格式的文件)

  • 抖音的橱窗在哪里看(抖音在哪里开橱窗)

    抖音的橱窗在哪里看(抖音在哪里开橱窗)

  • 微信语音铃声怎么设置(微信语音铃声怎么换一个)

    微信语音铃声怎么设置(微信语音铃声怎么换一个)

  • Vue中如何使用v-model双向数据绑定select、checked等多种表单元素(vue中如何使用axios)

    Vue中如何使用v-model双向数据绑定select、checked等多种表单元素(vue中如何使用axios)

  • xzcat命令  查看xz压缩文件的内容(linux用cat命令查看)

    xzcat命令 查看xz压缩文件的内容(linux用cat命令查看)

  • 公关支出是什么意思
  • 协会会费如何做分录
  • 增值税专用发票抵扣期限
  • 小规模免收增值税的收入范围
  • 有形动产租赁服务属于现代服务吗
  • 计提工会经费的基数是什么
  • 所有者权益股东权益
  • 税务规定先收款后开票,合同约定先收票再付款
  • 公司在筹备阶段可以不交社保
  • 银行付款回单怎么看
  • 普票丢失了能作废重开吗
  • 手撕汽车票在哪里弄到
  • 小规模购买税盘的费用可以抵税吗
  • 销售货物分期付款怎么确认收入
  • 银行汇票退回
  • 服务类收入
  • 购买办公室电脑桌分录
  • 营改增后房地产公司税种及税率
  • 微税平台抄税的步骤是怎样的?
  • 旅行社代订机票可以入差旅费报销吗
  • 减免附加税的账户有哪些
  • 专票当月未认证怎么处理
  • 预缴的个人所得税会计分录
  • 存货跌价准备会影响利润总额吗
  • 调整暂估有差价怎么办
  • 个人公益性捐赠全额还是限额
  • 一般纳税人增值税及附加税费申报表怎么填
  • 建立账套的简单操作
  • 客户扣了一部分不合格产品的货款,请问如何做账呢?
  • 房屋出租收入是多少
  • 应如何做会计分录表
  • 出差人员餐费,进项可以抵扣吗
  • word表格跨页设置
  • 航天信息维护费300元能全额抵扣吗
  • 苹果macOS 11开发者预览版发布
  • lsass.exe是什么程序
  • 脐橙产业可行性报告
  • 年底社保怎么交
  • torch.save用法
  • laravel 使用redis
  • 税务局罚款计入哪个会计科目
  • 适用执行企业会计准则的一般企业
  • 冲回上年计提费用
  • 如何在vue项目中禁止谷歌浏览器改变网页颜色
  • web2的核心理念
  • 总分机构纳税
  • 建筑安装工人住宿费会计分录
  • 房开企业会计分录
  • 金税盘一天可以开多少张发票
  • 低值易耗品摊销借贷方向
  • 当月扣缴社保分录
  • 现金支票作用
  • 生产车间生产工人的薪酬计入什么
  • 公司代个人缴纳社保
  • 营改增的增值税
  • 提供劳务的收入计入什么科目
  • mysql 最新稳定版本
  • windows 10的安装
  • mysql查询时间语句
  • Mac安装不了iTunes
  • macbookpro 钥匙串
  • mac怎么自己定制
  • centos安装位置选择
  • win10如何关闭windows安全中心图标
  • linux无法运行yum
  • ctrl+的作用
  • linux lv vg
  • Win7 64位旗舰版设置字体显示比例让字体变大
  • Linux如何清理磁盘空间
  • python函数enumerate
  • js获取html自定义属性
  • python字符串拼接join
  • android studio操作指南
  • jQuery Ajax页面局部加载方法汇总
  • 定额发票查询app
  • 职工疗养费可以税前扣除吗
  • 交完契税,房产证没办,契税能退吗
  • 国税局官网查询平台
  • 社保uk申请流程
  • 江苏省国家税务局总局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设