前端---后端 跨域?

news/2024/7/10 0:24:50 标签: 前端, java, tomcat, vue.js, vue

一、跨域 ?

跨域(Cross-Origin Resource Sharing,CORS)是浏览器的一项安全功能,它用于限制一个域名下的文档如何从另一个不同的域名、端口或协议请求资源。跨域资源共享(Cross-Origin Resource Sharing,CORS)是一种用于解决跨域问题的机制,它定义了浏览器和服务器应该如何处理来自其他源的跨源请求。  在没有启用CORS的情况下,浏览器的同源策略限制了从一个源加载的文档的脚本如何与来自不同源的服务器交互。同源是指协议(http或https)、域名(example.com)和端口(80)的组合相同。如果文档的源(协议、域名和端口)与请求源不同,则该请求将被浏览器阻止。  启用CORS需要服务器在响应中包含特定的头部信息,以告知浏览器哪些跨源请求被允许。这些头部信息包括Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等。根据CORS的规则,只有被允许的跨源请求才会被浏览器执行,并且浏览器会对这些请求进行一些限制,比如不允许调用服务器的cookie或使用DOM操作。  可以通过在服务器端设置Access-Control-Allow-Origin头部字段来启用CORS。如果该字段被设置为*,则表示任何源都可以访问资源。如果想要更精确的控制,可以设置为具体的源域名。此外,还可以设置其他CORS头部字段来控制跨域请求的权限。

二、示例

(1)错误演示

前端脚手架中直接请求 http://localhost:8080/admin/employee/login 接口

运行后在控制台会发现出现了跨域问题 

(2)成功演示 

为了解决跨域问题,可以在vue.config.js文件中配置代理

运行后,后端成功返回数据 


 在此上面前提我是已经运行起了后端---

可以看到使用前端发起post请求的地址(红线标注)

 并且这里的Tomcat端口号为8080,所以前端就可所以配置代理8080端口号


http://www.niftyadmin.cn/n/5283617.html

相关文章

【高数定积分求解旋转体体积】 —— (上)高等数学|定积分|柱壳法|学习技巧

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言:"没有罗马,那就自己创造罗马~" 目录 Shell method Setting up the Integral 例题 Example 1: Example 2: Example 3: Computing…

UDP Ping程序实现--第3关:服务端模拟丢包事件

✨创作不易,还希望各位大佬支持一下 👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 任务描述 本关任务:在…

nodejs+vue+ElementUi大学新生入学系统的设计与实现1hme0

采用B/S模式架构系统,开发简单,只需要连接网络即可登录本系统,不需要安装任何客户端。开发工具采用VSCode,前端采用VueElementUI,后端采用Node.js,数据库采用MySQL。 涉及的技术栈 1) 前台页面…

【matlab】Matlab三维绘图指南

Matlab是一种强大的数学计算和可视化工具,而三维绘图是其功能之一。通过Matlab的三维绘图功能,我们可以创建精美、直观的三维图形,展示和分析复杂的数据。本文将为您提供一份简明的Matlab三维绘图指南,帮助您快速上手并创建出令人印象深刻的三维图形。 准备数据在开始绘制三…

docker数据卷数据卷容器

前言 今天调休在家,随便玩玩,简单做下学习记录 1. 数据卷特点 数据卷在容器启动时初始化,如果容器使用的镜像在挂载点包含了数据,这些数据会被拷贝到新初始化的数据卷中数据卷可以在容器之间共享和重用可以对数据卷里的内容直接…

在同一局域网下连接共享文件夹失败,提示:你不能访问共享文件夹,因为你组织的安全策略阻止未经身份验证的来宾访问

1.尝试打开guest访问。 (1)使用键盘 win R 键,打开运行窗口,并输入 gpedit.msc 打开本地组策略编辑器窗口 (2)选择计算机配置------->管理模板-------->网络-------->Lanman工作站。 &#…

MongoDB操作_数据库_集合

.......................................................................................................................................................... 三、MongoDB操作 3.1 数据库操作 一个mongodb中可以建立多个数据库。 MongoDB的默认数据库为"test…

浅析海博深造

文章目录 深造作用 留学种类 选专业 择校 申请流程 申请方式 深造作用 1、个人能力提升(学术专业、语言、新文化或新生活方式) 2、更好的职业发展(起点更高、结交新朋友或扩大社交圈) 3、北京上海落户优惠 4、海外居留福…