跨域解决方案[前端+后端]

简介: 跨域解决方案[前端+后端]

跨域解决方案🔨

一、前言👁

什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

就是【不同源】导致【无法发送ajax异步请求】获取数据的表现,术语叫跨域

思考:如何解决跨域报错Access-Control-Allow-Origin,拿不到数据问题?

二、解决方法💡

前端👩‍🎓

1.前端代理 Http-proxy-middleware(最常用)

2.谷歌插件(开发过程用)

3.谷歌命令(最简单,直接把同源策略关闭)

如何配谷歌命令?

window环境下

1 找到谷歌浏览器安装目录或者直接用桌面的也行 发送桌面快捷方式

2 单击图标 鼠标右击 点击属性

3 在目标后面输入 下述代码

–disable-web-security --user-data-dir=C:\chromedata

“C:\Program Files\Google\Chrome\Application\chrome.exe” --disable-web-security --user-data-dir=C:\chromedata

没有引号无所谓,有引号在外面

切记加个空格

再去创建下磁盘目录C:\chromedata

4 点击确定 双击打开你配置的快捷方式 随意访问

mac环境下

sudo open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/用户名/自己随便搞一个目录/

sudo open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/wof/ab/

sudo open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/wof/MyChromeDevUserData/

4.前端jsonp(需要前后端配合 不推荐)

5.用websocket技术

6.用H5里的window.postMessage在两个网页间传递数据 (iframe嵌套网页)

后端&运维👨‍🎓

后端:cors方法 也就是后端声明header头允许跨域

运维:nginx反向代理

目录
相关文章
|
2月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
86 2
|
14天前
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
38 4
|
1月前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
133 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
1月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
295 8
|
1月前
|
设计模式 前端开发 JavaScript
前端编程的异步解决方案有哪些?
本文首发于微信公众号“前端徐徐”,介绍了异步编程的背景和几种常见方案,包括回调、事件监听、发布订阅、Promise、Generator、async/await和响应式编程。每种方案都有详细的例子和优缺点分析,帮助开发者根据具体需求选择最合适的异步编程方式。
70 1
|
1月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
19 1
|
1月前
|
Java 数据库连接 API
springBoot:后端解决跨域&Mybatis-Plus&SwaggerUI&代码生成器 (四)
本文介绍了后端解决跨域问题的方法及Mybatis-Plus的配置与使用。首先通过创建`CorsConfig`类并设置相关参数来实现跨域请求处理。接着,详细描述了如何引入Mybatis-Plus插件,包括配置`MybatisPlusConfig`类、定义Mapper接口以及Service层。此外,还展示了如何配置分页查询功能,并引入SwaggerUI进行API文档生成。最后,提供了代码生成器的配置示例,帮助快速生成项目所需的基础代码。
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
95 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
1月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
75 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
1月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
235 0

热门文章

最新文章