位置: 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怎样遍历对象中的每个元素)

  • 出口退税 系统
  • 个人怎么缴纳印花税
  • 专票不抵扣认证什么意思
  • 已经缴纳的税款怎么做账
  • 管理费用中税金分录怎么写
  • 取得保险赔偿的会计分录
  • 企业的主管部门承担什么责任
  • 跨期租金收入税怎么算
  • 库存现金日记账和库存现金总账都应逐日逐笔
  • 运输公司租入的车辆如何核算
  • 如何计算企业当年利润
  • 工程多少金额需要投标
  • 免抵税额计入什么科目
  • 企业有哪些o
  • 房企行业其他应收账款的来源是什么
  • 没有认证的进项发票怎么入账
  • 所得税补缴自查需要缴纳什么
  • 对方开具红字发票过来怎么做进项税转出
  • 租赁产生的成本有哪些
  • 成本少结转了怎么调账
  • 来料加工原材料计入什么科目
  • 跨年的物业费如何记账
  • 借用下属单位人员违反什么政策
  • 专用发票抵扣和免税区别
  • win10电脑键盘灵敏度怎么调
  • 激进型和保守型筹资组合怎么判断
  • 360se进程太多
  • 承租集体土地如何确权
  • 债券转换为普通债权
  • 主营业务收入会计分录例题
  • 公司报销医疗费用公司医保里面的钱也报吗
  • 分公司改为子公司的所得税业务处理?
  • 酒店如何核算成本
  • yolov教程
  • 前端毕业设计项目
  • 不动产和无形资产的区别
  • php soap wsdl
  • 深入理解计算机系统 第三版 pdf
  • php数组实现原理
  • 什么是重绘和回流
  • vue 插槽详解
  • php 银行卡支付
  • 企业所得税包含在税金及附加里面吗
  • 什么是技术服务工程师
  • 存货按照计划成本法核算内容
  • 发票收款人和复核人在哪儿政
  • 企业进行成本核算时,应根据生产经营特点
  • 应交增值税负数表示什么
  • 行政单位无偿划拨资产账务处理
  • 记账凭证摘要的填制要求
  • 税控盘全额抵扣怎么填申报表
  • 公司销售商品怎么做分录
  • 以前年度损益调整借贷方向
  • 收购一家公司需要多少股份
  • 接受非货币性资产捐赠入账价值
  • 国税退回多缴税款
  • 预期信用损失率变更属于会计估计变更吗
  • 公对私转账有没有手续费
  • 免税发票可以抵扣税收农产品吗
  • mysql序列函数
  • 在MySQL中使用STRAIGHT_JOIN的教程
  • win8 怎么样
  • mse windows defender
  • 如何在windows中添加字体
  • mac计算器快捷键
  • centos安装v2
  • 黑客怎样入侵别人手机
  • opengl oes纹理
  • excel怎么添加动态图
  • jquery跳出循环
  • chrome excel
  • jquery cookie存取
  • 原生js
  • 企业所得税要在几号之前申报
  • 法人变更税务登记表怎么填
  • 增值税发票打印时号码不一致怎么办
  • 出口退税企业分类管理等级
  • 加拿大鹅海关被税交多少
  • 营改增之前和之后
  • 国税系统如何变更财务负责人
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设