配置代理解决跨域(CORS)问题

一、跨域 ?

我们在完成前后端分离项目时(Vue+SpringBoot),有很多人会遇到跨域问题(CORS)。

跨域(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.mzph.cn/news/582603.shtml

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

相关文章

H5向微信小程序发送信息(小程序web-view打开H5)

引入weixin-js-sdk npm i weixin-js-sdk 页面引入 // 引入wxjsimport wx from "weixin-js-sdk"; 点击触发方法 methods: {goweap(id){console.log(wx);// H5传递数据 (navigateBack)wx.miniProgram.navigateBack({delta: 1});wx.min…

Django 中集成 CKEditor 富文本编辑器详解

概要 在 Web 应用中,富文本编辑器是提高用户体验的重要组件之一。CKEditor 是一款流行的、功能丰富的富文本编辑器。在 Django 项目中集成 CKEditor 不仅可以提升内容编辑的灵活性,还能丰富用户的互动体验。本文将详细介绍如何在 Django 中集成和配置 C…

Apache Commons JCS缓存解决方案

第1章:引言 大家好,我是小黑!今天,咱们来聊聊Apache Commons JCS,一个Java界里的缓存大杀器。缓存技术,对于提高应用性能来说,就像是给它加了一剂兴奋剂,能让数据访问变得快如闪电。…

windows进行udp端口转发,解决项目中服务器收不到组播数据的问题

说明 windows7的netsh interface portproxy命令只支持tcp端口转发 如果要进行udp端口转发可以使用sokit 运行sokit 端口转发(以为tcp作为讲解,udp类似) 选择转发器 输入监听地址(SRC地址)和端口 输入转发地址&am…

零基础学Java第三天

复习与回顾: 1.八大基本数据类型整型: byte short int long浮点: float double字符: char布尔: boolean2.声明整型和浮点和布尔类型的数据 一个变量数据类型 变量名字 初始化的值;int a 234;float f1 34.5f;double d1 782.9;boolean b1 true;3.变量名…

深度学习核心技术与实践之深度学习基础篇

非书中全部内容,只是写了些自认为有收获的部分 神经网络 生物神经元的特点 (1)人体各种神经元本身的构成很相似 (2)早期的大脑损伤,其功能可能是以其他部位的神经元来代替实现的 (3&#x…

nmap扫描和MS17-010(永恒之蓝)漏洞攻击

情况介绍 攻击机kali中使用ifconfig可以看到ip是192.168.0.106。 靶机Window 7使用ipconfig可以看到ip是192.168.0.100。 Nmap Nmap全称为Network Mapper,又成为“上帝之眼”,可以扫描ip和端口。 然后在kali攻击机上使用nmap 192.168.0.103可以看…

一元函数微分学——刷题(2

目录 1.题目:2.解题思路和步骤:3.总结:小结: 1.题目: 2.解题思路和步骤: 这个题目可能看上去比较吓人,但是,又很简单;因为一切都太明确了,跟着我仔细看一下&…

SpingBoot的项目实战--模拟电商【2.登录】

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于SpringBoot电商项目的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一.功能需求 二.代码编写 …

目标检测损失函数:IoU、GIoU、DIoU、CIoU、EIoU、alpha IoU、SIoU、WIoU原理及Pytorch实现

前言 损失函数是用来评价模型的预测值和真实值一致程度,损失函数越小,通常模型的性能越好。不同的模型用的损失函数一般也不一样。损失函数主要是用在模型的训练阶段,如果我们想让预测值无限接近于真实值,就需要将损失值降到最低…

uniApp中uView组件库的丰富布局方法

目录 基本使用 #分栏间隔 #混合布局 #分栏偏移 #对齐方式 API #Row Props #Col Props #Row Events #Col Events UniApp的uView组件库是一个丰富的UI组件库,提供了各种常用的UI组件和布局方法,帮助开发者快速构建美观、灵活的界面。下面给你写一…

C++设计模式 #8 抽象工厂(Abstract Factory)

抽象工厂这个名字比较难以帮助理解,可以把抽象工厂理解为“品牌工厂”或者“家族工厂”。 动机 在软件系统中,经常面临着“一系列相互依赖的对象”的创建工作;同时,由于需求的变化,往往存在更多系列对象的创建工作。如…

C# 常用数据类型及取值范围

1.常见数据类型和取值范围 序号数据类型占字节数取值范围1byte10 到 2552sbyte1-128 到 1273short 2-32,768 到 32,7674ushort20 到 65,5355int4-2,147,483,648 到 2,147,483,6476uint40 到 4,294,967,2957float41.5 x 10−45 至 3.4 x 10388double85.0 10−324 到 1.…

位运算|比特位计数、汉明距离

位运算|比特位计数、汉明距离 338 比特位计数 /** 比特位计数法一:Brian Kernighan 算法的原理是:对于任意整数 x,令 xx & (x−1),该运算将 x 的二进制表示的最后一个 1 变成 0。因此,对 x 重复该操作&#xff0…

极智开发 | 解读英伟达软件生态 深度神经网络库cuDNN

欢迎关注,获取我的更多经验分享 大家好,我是极智视界,本文来介绍一下 解读英伟达软件生态 深度神经网络库cuDNN。 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码下载,链接:https://t.zsxq.com/0aiNxERDq cuDNN,全称为 NVIDIA CUDA Deep Neural Net…

Transform环境搭建与代码调试——Attention Is All Y ou Need

1、源代码 2、环境搭建 conda create -n transform python3.8 -y conda activate transform cd /media/lhy/Transforms/annotatedtransformerpip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple # # Uncomment for colabpip install -q torchdata…

一篇文章带你轻松入门Python

Python基础 1. Hello World! Python命令行 假设你已经安装好了Python, 那么在命令提示符输入: python 将直接进入python。然后在命令行提示符>>>后面输入: >>>print(Hello World!) 可以看到,随后在屏幕上输出: print是一个常用函数&#xf…

阿里云PolarDB数据库费用价格表

阿里云数据库PolarDB租用价格表,云数据库PolarDB MySQL版2核4GB(通用)、2个节点、60 GB存储空间55元5天,云数据库 PolarDB 分布式版标准版2核16G(通用)57.6元3天,阿里云百科aliyunbaike.com分享…

HPM6750开发笔记《开发环境的搭建》

目录 一,下载完整的HPM—SDK 二,安装硬件驱动 二,软件激活 三,创建工程 1.用文档中给的方法创建工程: 2.用sdk_env_v1.3.0中提供的工具创建工程: 一,下载完整的HPM—SDK 下载网址&#x…

Python sanic框架钉钉和第三方打卡机实现

同样还是需要开通钉钉应用这里就不错多说了 第一步:梳理逻辑流程 前提:打卡的机器是使用postgres数据库,由于因为某些原因,钉钉userId 我已经提前获取到了存放到数据库里。 1.用户打卡成功后,我们应该监听数据库进行查询&#xf…