位置: IT常识 - 正文

Vue中的跨域解决方案(vue中解决跨域问题)

编辑:rootadmin
Vue中的跨域解决方案 前言

推荐整理分享Vue中的跨域解决方案(vue中解决跨域问题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue跨域问题解决,vue解决跨域的原理,vue跨域问题的三种解决方案,vue跨域解决方案 简书,vue解决跨域的原理,vue跨域解决方案 简书,vue跨域解决方案 简书,vue跨域解决方案 简书,内容如对您有帮助,希望把文章链接给更多的朋友!

跨域是因为浏览器存在对不同源页面数据接收的限制。这种限制就是浏览器的同源策略。

同源策略是浏览器的安全机制,跨域的原理就是通过各种方式避开浏览器的安全机制

使用

在项目开发时,对跨域的概念仅限于了解,所以没有注重过程,只注重结果。所以在开发项目时,使用的是市面上比较常用,并且能够一劳永逸的cors。虽然cors方法能够完美解决跨域问题,但是还是要秉持着对知识探索的态度,去深入理解跨域问题。

报错提示

这里我使用8080端口的客户端访问3000端口的服务器,结果报错。

原因是因为端口号不同产生跨域。

如果将服务器端口号改为8080就不会报错了。

跨域方法

跨域的方法有cors、Proxy正向代理、Nginx反向代理、Jsonp

现阶段跨域方式有很多种,但是基本思想只有两种:

绕过同源策略

Jsonp:历史遗留的产物,虽然思想很好,但是局限性太大(仅支持get、因为数据是在url中,所以携带数据小)。

原理:有三个标签不受同源策略影响:<script src="xxx"></script><link herf="xxx"></link><img src="xxx"></img>实现: // 1.创建script var script = document.createElement('script') // 2.定义回调函数 function getData(data) { // 调用函数返回的数据 console.log(data); } // 3.设置src属性 script.src = 'http://localhost:3000?callback=getData' // 4.让cript生效 document.appendChild(script)

Nginx:通过反向代理绕过去,这是很完美的解决方案,加上会给服务器增加一点压力,不过这点压力问题并不大

如何理解反向代理:代理服务器代替目标服务器去接收并响应给客户端发起的请求。隐藏服务器。

​ 发起请求:客户端向代理服务器发出请求,代理服务器再将请求转发给目标服务器

​ 响应数据:目标服务器向代理服务器响应数据,代理服务器再向数据响应给客户端

很常用的方法,像网易、头条都使用nginx代理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ddoEgRFd-1656482203293)(https://juejin.cn/)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4M4avsX0-1656482203293)(https://juejin.cn/)]

这是我在chrome上看的某些文件。

nginx使用:

下载nginx

直接到官网下载

Vue中的跨域解决方案(vue中解决跨域问题)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gaMNC5wi-1656482203294)(https://juejin.cn/)]

修改默认配置

打开conf/nginx.conf

配置代理端口

- 配置监听端口

> 输入 start nginx.exe 没有反应表示启动成功

Proxy:通过正向代理绕过去,让服务器帮我们向服务器发送请求,因为跨域均存在于浏览器与服务器之间。只能在本地开发环境使用。

如何理解正向代理:代理服务器代替客户端向服务器发起请求。隐藏客户端。

​ 发起请求:代理服务器从客户端发出请求,向目标服务器发起请求。

​ 响应数据:目标服务器响应请求,代理服务器接收请求,并转发给客户端。

日常使用的翻墙就是基于这个原理。

一句话概述正向代理和方向代理:正向代理客户端,反向代理服务器。

main.js

axios.defaults.baseURL = '/'

vue.config.js

module.exports = { devServer: { proxy: { '/': { target: 'http://localhost:3000', // 目标服务器 changeOrigin: true } } }}

这里我使用的是webpack proxy,是webpack提供的代理服务,方便易用,但是只适用于开发阶段

原理:在代理服务器传递数据给本地浏览器的过程中,两者同源,并不存在跨域行为,这时候浏览器就能正常接收数据

此时,只要浏览器访问根路径,代理服务器就会向目标服务器发起请求。

补充:CDN(内容分发网络)

简单来说就是,用户发起请求,请求会发送到最适合的服务器上。比如说,我在广州发送请求,请求就会发送到广州的服务器上。优点类似京东快递,发货的时候会优先选择就近的京东仓库,所以物流速度很快,同样的CDN也是加快网络请求速度。

cors

终级解决方案(IE9 以下除外)

跨域资源共享 (Cross-Origin Resource Sharing, CORS),就是在服务器端的响应中加入额外的HTTP头,使浏览器能跨域访问资源。

响应头需要设置的字段:Access-Control-Allow-Origin: *

我做项目时,使用方法是添加 cors 中间件

// 引入corsconst cors = require('cors')// 使用 cors()app.use(cors())

说明

跨域请求产生时,服务器是能够接收到数据的,并且也响应了数据,只不过在浏览器接收数据的时候,由于不同源的原因,出发了浏览器的安全机制,所以数据就被挡在浏览器外。

本文链接地址:https://www.jiuchutong.com/zhishi/300774.html 转载请保留说明!

上一篇:2023年AI十大展望:GPT-4领衔大模型变革,谷歌拉响警报,训练数据告急(2023年中国会有什么重大事件)

下一篇:js中遍历对象数组并获取对象相应的属性值(js怎样遍历对象中的每个元素)

  • 支付宝怎么取消联合国儿童基金会(支付宝怎么取消自动转入余额宝)

    支付宝怎么取消联合国儿童基金会(支付宝怎么取消自动转入余额宝)

  • 抖音自动播放怎么关掉(抖音刷播放双击24小时在线秒刷)

    抖音自动播放怎么关掉(抖音刷播放双击24小时在线秒刷)

  • 飞行模式是什么意思可以接电话吗(苹果手机飞行模式是什么)

    飞行模式是什么意思可以接电话吗(苹果手机飞行模式是什么)

  • 迅雷超级会员和白金会员区别(迅雷超级会员和百度网盘超级会员)

    迅雷超级会员和白金会员区别(迅雷超级会员和百度网盘超级会员)

  • oppor17怎样设置永不熄屏(oppor17怎样设置屏幕切换效果)

    oppor17怎样设置永不熄屏(oppor17怎样设置屏幕切换效果)

  • 软件在桌面不显示图标怎么办(软件在桌面不显示全屏除了调分辨率还可以调哪里)

    软件在桌面不显示图标怎么办(软件在桌面不显示全屏除了调分辨率还可以调哪里)

  • 高级视觉效果有什么用(高级视觉效果耗电吗)

    高级视觉效果有什么用(高级视觉效果耗电吗)

  • 京东直播回放去哪里找(京东直播怎么看回播)

    京东直播回放去哪里找(京东直播怎么看回播)

  • 怎样固定手机屏幕不要让旋转(怎样固定手机屏,不让转动)

    怎样固定手机屏幕不要让旋转(怎样固定手机屏,不让转动)

  • 苹果更新系统一直不动(苹果更新系统一半不走了)

    苹果更新系统一直不动(苹果更新系统一半不走了)

  • 苹果8有红外线功能吗(苹果8有红外线遥控吗)

    苹果8有红外线功能吗(苹果8有红外线遥控吗)

  • 光敏电阻的工作原理(光敏电阻的工作原理和光电效应的异同点)

    光敏电阻的工作原理(光敏电阻的工作原理和光电效应的异同点)

  • 闲鱼被限制发布怎么办永久限制闲鱼卖家权限(闲鱼被限制发布168小时以后会怎么样)

    闲鱼被限制发布怎么办永久限制闲鱼卖家权限(闲鱼被限制发布168小时以后会怎么样)

  • pdf档是什么意思(pdf文档格式是啥意思)

    pdf档是什么意思(pdf文档格式是啥意思)

  • 声卡闪避是什么意思(声卡闪避是什么用)

    声卡闪避是什么意思(声卡闪避是什么用)

  • 微信dwg文件怎么打开(微信dwg文件怎么发到QQ)

    微信dwg文件怎么打开(微信dwg文件怎么发到QQ)

  • 什么是识别距离(什么是识别距离的软件)

    什么是识别距离(什么是识别距离的软件)

  • oppo手机为什么语音播放失败(oppo手机为什么耗电那么快)

    oppo手机为什么语音播放失败(oppo手机为什么耗电那么快)

  • 内存条必须2个一样么(内存要两条一样吗)

    内存条必须2个一样么(内存要两条一样吗)

  • fhd屏和ips屏的区别(ips屏和fhd屏哪个好)

    fhd屏和ips屏的区别(ips屏和fhd屏哪个好)

  • 手机屏幕变暗怎么办(手机屏幕变暗怎么回事)

    手机屏幕变暗怎么办(手机屏幕变暗怎么回事)

  • 安卓手机怎么查看wifi密码(安卓手机怎么查看电池健康度)

    安卓手机怎么查看wifi密码(安卓手机怎么查看电池健康度)

  • 华为黑屏唤醒功能在哪(华为黑屏唤醒功能)

    华为黑屏唤醒功能在哪(华为黑屏唤醒功能)

  • 探探左滑右滑的区别(探探左滑右滑有什么区别)

    探探左滑右滑的区别(探探左滑右滑有什么区别)

  • 微信公交卡怎么用(微信公交卡怎么关闭)

    微信公交卡怎么用(微信公交卡怎么关闭)

  • 360安全浏览器如何查看电视直播(360安全浏览器如何退出登录)

    360安全浏览器如何查看电视直播(360安全浏览器如何退出登录)

  • 途牛旅游如何入驻商家(途牛旅游网属于什么模式)

    途牛旅游如何入驻商家(途牛旅游网属于什么模式)

  • 手机怎么弄word文档(手机怎么弄word文档电子版)

    手机怎么弄word文档(手机怎么弄word文档电子版)

  • 资产损失税前扣除及纳税调整明细表
  • 税金及附加现金流量表
  • 购买需要安装的设备会计分录
  • 建筑劳务发票是全额抵扣吗
  • 工厂道路设计图
  • 受让应收账款的账务处理
  • 出口报关单价比合同价高
  • 母子公司换股协议
  • 小微企业所得税税率2.5% 10% 25%
  • 其他项目工会筹备金怎么报税
  • 职工薪酬纳税调整标准
  • 收到的出口退税款一直有余额吗
  • 进项税转出的附加税怎么做
  • 核销外管证需要什么手续
  • 委托出口业务的账务如何处理呢?
  • 采购与付款内部控制开题报告
  • 原材料计入什么账本
  • 合同成本如何设一级科目
  • 工厂的劳务加工有哪些
  • switpa.exe - switpa是什么进程
  • 高新技术企业研发
  • hpp是什么文件
  • php中strcmp
  • 公会经费缴费单位应于每月
  • php缓存文件并自动清理
  • 月球合影
  • 应收票据其他应收款都需要提取坏账准备么
  • 前端项目如何部署到服务器
  • joomla中文手册
  • 人工智能内容生成
  • element_at
  • 使用命令查看
  • php购物车及订单思路
  • nstat命令 监视内核的SNMP计数器和网络接口状态
  • 逾期未收回包装物押金会计分录
  • 工程代建的性质
  • 人工费按照考虑管理费和利润吗
  • 非流动资产处置计入什么科目
  • 织梦怎么用
  • 非房地产企业的基建管理办法
  • 销售收入未及时入账
  • 在建工程的预付款账务处理
  • 企业消费税应计入资产成本的有哪些
  • 生日卡和过节卡一样吗
  • 融资性租赁税率
  • 货物退回的会计怎么做账
  • 待处理财产损溢借方是增还是减
  • 生产成本如何结转
  • 国债逆回购收益什么时候到账
  • 利润敏感性分析法可以帮助企业有哪些决策?
  • 进项税有余额在报表如何反应
  • 企业开负数发票退货后如何处理?
  • 车辆买的商业险全险,车辆出了事故,保险公司怎么赔
  • 多计提的费用可以记收入吗会计分录
  • 扶贫小额信贷分贷统还违规吗
  • 单式记账法因为其简单易学,记账效率高
  • 私车公用涉及的税种有哪些
  • 结转本月福利费会计分录
  • 现金存入银行凭证怎么写
  • 资产减值损失属于费用类吗
  • 资产负债表中的固定资产是原值还是净值
  • 劳务派遣差额征税如何开票
  • mysql中mysqldump
  • sql server233错误
  • sqlserver分页查询sql
  • macbookair安装rosetta
  • macxi
  • win10推送win11
  • windows 8 build
  • win8分屏快捷键
  • jquery实现
  • unity怎么做触屏按键
  • js中密码由字母和数字组成,长度为4-20
  • 网络游戏数据包
  • 安卓退出界面
  • 批处理实例
  • pypy 使用
  • 学习JavaScript事件流和事件处理程序
  • 国家税务总局河南省税务平台
  • 山东税务社保缴纳进入小程序
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设