vue2-vue项目中你是如何解决跨域的?

news2024/9/27 23:29:20

1、跨域是什么?
跨域本质是浏览器基于同源策略的一种安全手段。
同源策略(sameoriginpolicy),是一种约定,它是浏览器最核心也是最基本的安全功能。
所谓同源(即指在同一个域)具有以下三个相同点:
协议相同(protocol)
主机相同(host)
端口相同(port)

反之非同源请求,也就是协议,端口,主机其中一项不相同的时候,这个时候就会产生跨域。

一定要注意跨域是浏览器的限制,你用抓包工具抓取接口数据,是可以看到接口已经把数据返回回来了,只是浏览器的限制,你获取不到数据,用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。

2、如何解决
解决跨域的方法有很多种,常用的有三种,分别为:
JSONP
CORS
Proxy
而在vue项目中,主要针对CORS和Proxy这两种方案进行展开。

CORS:(Cross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的http头组成,这些http头决定浏览器是否阻止前端javascript代码获取跨域请求的响应。
CORS实现起来特别方便,只需要增加一些http头,让服务器能声明允许的访问来源,只要后端实现了CORS,就实现了跨域
在这里插入图片描述
以koa框架举例
添加中间件,直接设置Access-Control-Allow-Origin响应头
在这里插入图片描述
注:Access-Control-Allow-Origin设置为”*“其实意义不大,可以说形同虚设,实际应用中,上线前我们会将Access-Control-Allow-Origin值设置为我们目标host

Proxy:代理(proxy)也称网络代理,是一种特殊的网络服务,允许一个(一般为客户端)通过这个服务与另一个网络终端(一般成为服务端)进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全,防止攻击。

方案1:
如果是通过vue-cli脚手架工具搭建项目,可以通过webpack为我们起一个本地服务器作为请求的代理对象。通过该服务器转发请求至目标服务器,得到的结果再转发给前端,但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域。
在vue.config.js文件,新增以下代码:
在这里插入图片描述
通过axios发送请求时,配置请求的根路径。
在这里插入图片描述
此外,还可以通过服务端实现代理请求转发。
以express框架为例
在这里插入图片描述
方案3
通过配置nginx实现代理。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/838258.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java对象的前世今生

文章目录 一、创建对象的步骤二、类加载机制三、内存分配指针碰撞 (内存连续)空闲列表 (内存不连续) 四、创建对象的5种方法五、浅拷贝与深拷贝 以下一行代码内部发生了什么? Person person new Person();一、创建对象的步骤 根据JLS中的规定,Java对象…

牢记这16个SpringBoot 扩展接口,写出更加漂亮的代码

1、背景 Spring的核心思想就是容器,当容器refresh的时候,外部看上去风平浪静,其实内部则是一片惊涛骇浪,汪洋一片。Springboot更是封装了Spring,遵循约定大于配置,加上自动装配的机制。很多时候我们只要引…

Scala编程语言入门教程

Scala教程 方便个人学习和查阅 学习目标 Scala介绍 简介 Scala创始人Martin Odersky马丁奥德斯基 再回到我们的scala语言,在Scala官网https://www.scala-lang.org/介绍了其六大特征。 Java和scala可以混编 类型推测(自动推测类型) 并发和分布式(Ac…

nginx的优化和防盗链 重要!!!

实验一、隐藏版本号 要把nginx的版本号隐藏起来,防止恶意攻击 方法一:修改配置文件 在http模块中加入一个命令 server_token off; 过程: 备份,改配置文件一定要备份 修改配置文件 在http模块中添加 server_tokens …

城市与AI,正待济沧海

厦门,自古以来是海上丝绸之路的战略支点,是中国海洋贸易网络中的明珠。外来的理念与技术自厦门而入,中国的文化与商品自厦门而出。新事物、新科技往往在这里焕发最耀眼的生机——比如说,人工智能。 多年来,厦门持续推进…

外部排序算法总结

一.内排总结 在之前博客里,博主已经介绍了各种内部排序算法的原理和C语言代码实现,不懂的朋友可以在同系列专栏里选择查看,今天介绍常见排序算法的最后一点,也就是外部排序。在此之前,我们先对外部排序的各种算法做一…

Centos7/8 安装/配置 Redis5

目录 一、安装 Redis 二、创建符号链接 1.针对可执行程序设置符号链接 2.针对配置文件设置符号链接 三、修改配置文件 1.修改 ip 地址 2.关闭保护模式 四、设置工作目录 1.创建工作目录 2.在配置文件中,配置工作目录 五、设置日志文件 1.创建日志目录 2…

vue3中的自定义指令用法

我们都知道vue2中自定义指令全局和局部是这样写的 局部: 全局: 可vue3写法发生改变,如下: 全局: 局部:

python高阶技巧

目录 设计模式 单例模式 具体用法 工厂模式 优点 闭包 案例 修改闭包外部变量 闭包优缺点 装饰器 装饰器原理 装饰器写法 递归 递归的调用过程 递归的优缺点 用递归计算阶乘 设计模式 含义:设计模式是一种编程套路,通过这种编程套路可…

Docker极速安装Jenkins

安装 Jenkins 是一个常见的任务,使用 Docker 进行安装可以简化该过程并确保环境一致性。以下是在 Docker 中安装 Jenkins 的详细步骤: 安装 Docker: 首先,请确保您已在目标机器上安装了 Docker。根据您的操作系统,可以在 Docker 官…

展示Streamlit文本魔力(六):从头顶到脚尖

文章目录 1 前言✨2 st.markdown - 引入丰富的Markdown文本3 st.title - 引入引人注目的大标题4 st.header - 引入简洁的小标题5 st.subheader - 添加次级标题6 st.caption - 添加解释性文字7 st.code - 显示代码块8 st.text - 显示文本9 st.latex - 显示LaTeX公式10 st.divide…

【导出Word】如何使用Java+Freemarker模板引擎,根据XML模板文件生成Word文档(只含文本内容的模板)

这篇文章,主要介绍如何使用JavaFreemarker模板引擎,根据XML模板文件生成Word文档。 目录 一、导出Word文档 1.1、基础知识 1.2、制作模板文件 1.3、代码实现 (1)引入依赖 (2)创建Freemarker工具类 &…

linux下绑定进程到指定CPU的操作方法

taskset简介 # taskset Usage: taskset [options] [mask | cpu-list] [pid|cmd [args...]] Show or change the CPU affinity of a process. Options: -a, --all-tasks operate on all the tasks (threads) for a given pid -p, --pid operate on ex…

高级web前端开发工程师的职责说明(合集)

高级web前端开发工程师的职责说明1 职责: 1、根据需求文档,完成PC端、移动端页面及交互的开发,并保证兼容性和确保产品具有优质的用户体验; 2、熟练使用 HTML 、 CSS 、 JS 、 Ajax 等技术,能解决各种浏览器兼容性问题&#xff…

小鱼深度产品测评之:阿里云容器服务器ASK,一款不需购买节点,即可直接部署容器应用。

容器服务器ASK测评 1、引言2、帮助文档3、集群3.1集群列表3.1.1 详情3.1.1.1概览 tab3.1.1.2基本信息 tab3.1.1.4集群资源 tab3.1.1.5 集群日志 tab3.1.1.6 集群任务 tab 3.1.2 应用管理3.1.2.1 详情3.1.2.2 详情3.1.2.3 伸缩3.1.2.4 监控 3.1.3 查看日志3.1.3.1 集群日志3.1.3…

【网络基础实战之路】设计网络划分的实战详解

系列文章传送门: 【网络基础实战之路】设计网络划分的实战详解 【网络基础实战之路】一文弄懂TCP的三次握手与四次断开 【网络基础实战之路】基于MGRE多点协议的实战详解 【网络基础实战之路】基于OSPF协议建立两个MGRE网络的实验详解 PS:本要求基于…

机器学习笔记之优化算法(十)梯度下降法铺垫:总体介绍

机器学习笔记之优化算法——梯度下降法铺垫:总体介绍 引言回顾:线搜索方法线搜索方法的方向 P k \mathcal P_k Pk​线搜索方法的步长 α k \alpha_k αk​ 梯度下降方法整体介绍 引言 从本节开始,将介绍梯度下降法 ( Gradient Descent,GD ) …

vue2-组件和插件的区别

1、组件是什么? 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在vue中每一个.vue文件都可以被视为一个组件。 组件的优势: 降低整个系统的耦合度,在保持接口不变的情况下…

学C的第三十二天【动态内存管理】

相关代码gitee自取:C语言学习日记: 加油努力 (gitee.com) 接上期: 学C的第三十一天【通讯录的实现】_高高的胖子的博客-CSDN博客 1 . 为什么存在动态内存分配 学到现在认识的内存开辟方式有两种: 创建变量: int val …

ardupilot 中坐标变换矩阵和坐标系变换矩阵区别

目录 文章目录 目录摘要1.坐标变换矩阵与坐标系变换矩阵摘要 本节主要记录ardupilot 中坐标变换矩阵和坐标系变换矩阵的区别,这里非常重要,特别是进行姿态误差计算时,如果理解错误,很难搞明白后面算法。 1.坐标变换矩阵与坐标系变换矩阵 坐标变换矩阵的本质含义:是可以把…