前端---后端 跨域?

一、跨域 ?

跨域(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端口号

相关推荐
Bdygsl1 小时前
前端开发:CSS(2)—— 选择器
前端·css
斯~内克1 小时前
CSS包含块与百分比取值机制完全指南
前端·css·tensorflow
麦兜*6 小时前
Spring Boot集成方案 + Elasticsearch向量检索,语义搜索核弹
java·spring boot·python·spring·elasticsearch·spring cloud·系统架构
Absinthe_苦艾酒7 小时前
JVM学习专题(四)对象创建过程
java·jvm·后端
百万蹄蹄向前冲7 小时前
秋天的第一口代码,Trae SOLO开发体验
前端·程序员·trae
努力奋斗17 小时前
VUE-第二季-02
前端·javascript·vue.js
路由侠内网穿透7 小时前
本地部署 SQLite 数据库管理工具 SQLite Browser ( Web ) 并实现外部访问
运维·服务器·开发语言·前端·数据库·sqlite
一只韩非子7 小时前
程序员太难了!Claude 用不了?两招解决!
前端·claude·cursor
JefferyXZF7 小时前
Next.js项目结构解析:理解 App Router 架构(二)
前端·全栈·next.js
Sane7 小时前
react函数组件怎么模拟类组件生命周期?一个 useEffect 搞定
前端·javascript·react.js