Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >5年经验程序员被问:前后端分离后,如何解决跨域问题?

5年经验程序员被问:前后端分离后,如何解决跨域问题?

作者头像
Tom弹架构
发布于 2023-09-07 02:16:14
发布于 2023-09-07 02:16:14
2.3K00
代码可运行
举报
文章被收录于专栏:Tom弹架构Tom弹架构
运行总次数:0
代码可运行

做Web开发,经常会遇到跨域问题,小伙伴们在面试中,也经常被问到。这不,又有一位工作3年的小伙伴被问到这样一道题,说前后端分离后,如何解决跨域问题?

今天,我给大家分享一下我的理解。

这个问题也有很多小伙伴单独问过我,很多小伙伴知道如何解决跨域问题,但是却说不清楚跨域到底是怎么产生的。所以,回答跨域解决方案之前,我们先来介绍一下跨域产生的原因。

1

产生原因

因为一般的浏览器都有一个安全机制,叫做同源策略限制。所谓同源策略就是指用户输入的URL中包含的协议、域名、端口都完全相同。也就是说,我们使用浏览器访问网页时,必须符合同源策略的请求才能访问。如果有一项不同,浏览器会觉得有安全风险,就不想让你使用这个接口的数据。

比如,在http://localhost:8080/index 页面中,用Ajax访问https://localhost:8081/index.json接口数据的时候,这两个URL的协议和端口不相同,也就是不同源,这就产生了跨域访问。当然,浏览器还是会将这个请求发送到后台服务器,但是,浏览器不会接收服务器响应结果。

举个更通俗的例子,就好比你去肯德基点餐,非要点一碗兰州拉面,店员虽然很鄙视你,但他还是会打电话问一下兰州拉面馆问一下,兰州拉面馆说不给肯德基供货。所以,你没有吃到兰州拉面。这其中,有个反常的操作,就是虽然你点的兰州拉面,但是肯德基店员还是帮你打电话问了,是拉面馆不给肯德基供货的,如果拉面馆说给肯德基供货而且把面送过来了,那么你就能吃到兰州拉面了。

这个案例中,店员就相当于是浏览器,肯德基呢就相当于当前看到的网页,兰州拉面馆就是相当于后台服务的接口。肯德基和兰州拉面不是同一个老板,相当于是不同源。拉州拉面就是你想要的接口数据。

但如果使用Postman等开发工具进行交互是不会出现跨域问题的,这是浏览器特有的限制。

其实,跨域问题也并不是前后端分离后才有的,后端开发的程序员一般都遇到过跨域问题。只是前后端分离开发以后,前端开发体现跨域问题更加明显了,经常要找后端开发人员来解决。

2

预检请求

为了支持跨域访问,浏览器设置了预检机制。也就是说在发出跨域请求时, 浏览器会自动发出一个查询请求,称为预检请求, 用来确认目标资源是否支持跨域。

如果请求要满足以下条件,浏览器才不会发送预检请求:

1、请求方法是GET 、PosT .HEAD其中任意一个

2、请求头中包含Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport.Width、Width字段。

3、Content-Type的值是text/plain 、multipart/form-data ,application/x-ww-form-urlencoded 中任意一个。

但是,在实际项目开发中,我们请求的Content-Type一般是是text/html、application/json等格式,或者使用自定义请求头,都会触发预检请求。

浏览器获取到预检请求的响应结果之后,判断服务器如果授权允许访问这个资源,就会再次请求真正的URL,如果不允许就会报这样一个错。

has been blocked by CORS policy : No 'Access-contro1-A11ow-Origin' header is present on the requested resource.

3

如何解决

我们可以利用浏览器的预检机制。

我只需要在后端服务添加CORS策略的配置就可以解决跨域问题。CORS全称是Cross Origin Resource Sharing,翻译过来叫做跨域资源共享。具体解决方案,有以下4种:

1)、如果是普通的Web项目,只需要在服务的根目录下添加一个crossdomain.xml文件即可。文件格式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?xml version="1.0"?> 
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <site-control permitted-cross-domain-policies="all"/>
    <allow-access-from domain="*"/>
    <allow-access-from domain="*"/>
    <allow-http-request-headers-from domain="*" headers="*"/></cross-domain-policy>

当然,使用这种方式不够灵活,在授权过度的情况下,会存在一些安全隐患。

2)、如果是Spring项目的话,可以添加一个处理跨域的过滤器或者拦截器。如代码所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }
}
代码语言:javascript
代码运行次数:0
运行
复制

3)、如果是Spring Boot项目的话,只需要在方法上添加@CrossOrigin注解即可,如代码所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@GetMapping("/list")
@CrossOrigin
public List<String> list(){
	...
}
代码语言:javascript
代码运行次数:0
运行
复制

如果需要支持跨域的方法非常多情况下,可以添加过滤器,比Spring更简洁,如代码所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Configuration
public class CorsConfig {
	@Bean
	public CorsFilter corsFilter(){
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.addAllowedOrigin("*");
		corsConfiguration.addAllowedHeader("*");
    corsConfiguration.addAllowedMethod("*");
		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**",corsConfiguration);
		return new CorsFilter(source);
  }
}

4)、Spring Boot项目还有一种更方便的方式,可以实现WebMvcConfigurer接口来实现跨域支持,如代码所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**")
		.allowedOriginPatterns( "*")
		.allowedMethods("GET","POST","PUT""DELETE""HEAD","OPTIONS")
    .allowCredentials(true)
		.maxAge(3600)
		.allowedHeaders("*");
	}
}

只需要重写addCorsMapping() 方法就可以了。

4

总结

以上就是对Java Web跨域问题的解决方案。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-05-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Tom弹架构 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
鸿蒙开发学习(一)之ArkTS
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS,Microsoft)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力。
六月的雨
2023/11/16
3.1K0
鸿蒙开发学习(一)之ArkTS
遥遥领先,HarmonyOS的ArkTS应用入门实操
HarmonyOS提供了一套UI开发框架,即方舟开发框架(ArkUI框架)。方舟开发框架可为开发者提供应用UI开发所必需的能力,比如多种组件、布局计算、动画能力、UI交互、绘制等。
杨不易呀
2023/12/02
2.1K1
遥遥领先,HarmonyOS的ArkTS应用入门实操
四、HarmonyOS应用开发-ArkTS开发语言介绍
TypeScript 是一个开源的编程语言,本章节只介绍了TypeScript的基础语法知识,更多内容大家可以参考 TypeScript 的官方教程(https://www.typescriptlang.org/docs/)。大家在学习过程中,如果没有搭建TypeScript的开发环境,也可以直接使用在线 Playground 平台(https://www.typescriptlang.org/play)进行编码练习。没有接触过 TypeScript 的同学可以先补齐相关的语法基础,再进入 HarmonyOS 的相关开发学习之旅。
跟着飞哥学编程
2024/05/24
9430
四、HarmonyOS应用开发-ArkTS开发语言介绍
体验一下使用 ArkUI 进行 HarmonyOS 开发并与 Compose 简单对比
搞得我也焦虑的不行,在谷歌的 Compose 推出后就赶紧去学,但是又觉得好像 Compose 的热度也不算太高,又去学 Flutter 。
小帅聊鸿蒙
2024/06/26
4980
体验一下使用 ArkUI 进行 HarmonyOS 开发并与 Compose 简单对比
三、HarmonyOS 应用开发入门之运行Hello World
HarmonyOS 应用开发采用的是 ArkTs 语言,而 ArkTs 语言是在 TypeScript(简称TS)基础上的扩展,而 TypeScript 又是 JavaScript 的超集。
跟着飞哥学编程
2024/03/19
3510
三、HarmonyOS 应用开发入门之运行Hello World
鸿蒙OS应用开发初体验
HarmonyOS(鸿蒙操作系统)是华为公司开发的一款基于微内核的分布式操作系统。它是一个面向物联网(IoT)时代的全场景操作系统,旨在为各种类型的设备提供统一的操作系统平台和开发框架。HarmonyOS 的目标是实现跨设备的无缝协同和高性能。
巫山老妖
2023/11/01
7560
鸿蒙OS应用开发初体验
三、HarmonyOS NEXT应用开发:ArkTS工程目录结构(Stage模型)
resources目录用于统一存放应用所需的各种资源,包括图片、音频、视频、文本等等。下面简要介绍resources 目录的用法,首先需要了解resources 的目录结构,如下
Harry技术
2025/01/13
1840
三、HarmonyOS NEXT应用开发:ArkTS工程目录结构(Stage模型)
【OpenHarmony】OpenHarmony 开发基础 ② ( DevEco Studio 常用工具 | 参考文档 | 预览器 | 检查器 | 项目文件结构 | Index.ets 首界面 )
在 DevEco Studio 中 , 选择 菜单栏 中的 " 视图 / 工具窗口 / API 参考 " 选项 ,
韩曙亮
2024/06/02
6960
【OpenHarmony】OpenHarmony 开发基础 ② ( DevEco Studio 常用工具 | 参考文档 | 预览器 | 检查器 | 项目文件结构 | Index.ets 首界面 )
harmony OS NEXT-基本介绍及DevcoStudiop基本使用
写代码时,我们经常会遇到这种情况,右侧出现不能开启预览器的提示,我们需要打开预览器日志查看报错
骑老奶奶过马路
2025/03/22
1030
01. HarmonyOS应用开发实践与技术解析
随着华为HarmonyOS生态的不断发展,越来越多的开发者开始关注并投入到HarmonyOS应用开发中。本文将通过一个实际的项目案例,详细讲解HarmonyOS应用开发的核心技术和最佳实践,帮助开发者快速掌握HarmonyOS应用开发的要点。
全栈若城
2025/03/03
1990
01. HarmonyOS应用开发实践与技术解析
【愚公系列】2023年11月 HarmonyOS教学课程 002-ArkTS语言(基本语法)
HarmonyOS的ArkTS语言是一种基于TypeScript开发的语言,它专为HarmonyOS系统开发而设计。ArkTS语言结合了JavaScript的灵活性和TypeScript的严谨性,使得开发者能够快速、高效地开发出高质量的HarmonyOS应用程序。
愚公搬代码
2025/06/02
1830
【愚公系列】2023年11月 HarmonyOS教学课程 002-ArkTS语言(基本语法)
HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 一)
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力。
爱吃土豆丝的打工人
2023/10/15
1K0
HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 一)
《元服务开发实践》第一章 环境与示例
安装包地址:https://developer.huawei.com/consumer/cn/download/
徐建国
2024/11/07
1120
《元服务开发实践》第一章 环境与示例
HarmonyOS应用开发者基础认证考试(95分答案)
A. FlexAlign.StartB. FlexAlign.SpaceEvenlyC. FlexAlign.EndD. FlexAlign.SpaceBetween
红目香薰
2023/10/11
12.7K0
HarmonyOS应用开发者基础认证考试(95分答案)
【 HarmonyOS 5 入门系列 】鸿蒙HarmonyOS示例项目讲解
根据华为开发者联盟 2024 年数据报告显示,HarmonyOS 设备激活量已突破 7.3 亿台,其中采用 ArkTS 声明式 UI 框架开发的应用占比达 68%,较 2023 年提升 45 个百分点。
GeorgeGcs
2025/06/03
1850
【 HarmonyOS 5 入门系列 】鸿蒙HarmonyOS示例项目讲解
鸿蒙开发 ArkTS 工程目录结构详解
今日推荐:Spring AI再更新:如何借助全局参数实现智能数据库操作与个性化待办管理
繁依Fanyi
2024/12/08
3880
ArkTS 入门指南:快速上手鸿蒙应用开发
ArkTS 是基于 TypeScript 的一种编程语言,主要用于鸿蒙应用的 UI 界面和业务逻辑开发。TypeScript 是一种 JavaScript 的超集,为开发大型应用添加了类型检查和其他特性,如类、接口、模块等。ArkTS 在 TypeScript 的基础上,进行了一些针对鸿蒙系统的优化和定制。
陆业聪
2024/07/24
1.2K0
ArkTS 入门指南:快速上手鸿蒙应用开发
【HarmonyOS Next之旅】DevEco Studio使用指南(一)
HUAWEI DevEco Studio(以下简称DevEco Studio)是基于IntelliJ IDEA Community开源版本打造,面向全场景多设备,提供一站式的分布式应用开发平台,支持分布式多端开发、分布式多端调测、多端模拟仿真,全方位的质量与安全保障。
枫叶丹
2025/03/08
3320
【HarmonyOS Next之旅】DevEco Studio使用指南(一)
Harmony ArkTS语言
  说到ArkTS就得说一下DevEco Studio的演变过程,在我写一篇关于鸿蒙的文章时,DevEco Studio才刚推出不久,当时所支持的语言是Java、JS、C++等,在后续的版本中逐渐去掉了Java,C++,最终使用到了ArkTS,那么我们下面来了解一下ArkTS的由来。
晨曦_LLW
2023/10/19
1.1K1
Harmony ArkTS语言
【HarmonyOS之旅】HarmonyOS开发基础知识(一)
用户应用程序泛指运行在设备的操作系统之上,为用户提供特定服务的程序,简称“应用”。
枫叶丹
2024/12/20
2070
【HarmonyOS之旅】HarmonyOS开发基础知识(一)
推荐阅读
相关推荐
鸿蒙开发学习(一)之ArkTS
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验