前端和后端解决跨域问题的方法

目前很多java web开发都是采用前后端分离框架进行开发,相比于单体项目容易产生跨域问题。

一、跨域问题CORS

1.什么是跨域问题?

 后端接收到请求并返回结果了,浏览器把这个响应拦截了。

2.跨域问题是怎么产生的?

浏览器基于同源策略,如果请求的网页和当前的服务不是同源的,并且发送的是XHR(XMLHttpRequest)请求,就会产生跨域问题。

同源策略:url中的协议、域名、端口号任意一个不同就不同源。注意两个不同的域名指向同一个主机ip也叫不同源。

3.为什么要有同源策略?

CSRF攻击:借助本地浏览器缓存的cookie信息,以当前登陆者的身份模拟发送请求,完成攻击者期待的操作。当攻击者拿到管理员的信息时可能对整个web程序造成重大打击。

csrf防御:

  • 规范使用各个请求方法,比如get请求只能检索信息,不能修改信息。
  • 当用户访问站点时生成一个随机数,并设置成用户发送请求时的cookie。用户提交表单时,要携带随机数。当csrf攻击者发送请求时,由于没有这个随机数,所以请求失败。
  • 在非get请求中增加token并使用拦截器校验。
  • HTTP头中有一个Referer字段,这个字段用以标明请求来源于哪个地址,在访问敏感数据时,先检查referer字段,查看请求来源于哪个地址。如果是本页面的url就可以访问,如果是别的网页的url就禁止访问。
  • 自定义属性加到请求头。通过 XMLHttpRequest 这个类,一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性。
  • 客户端中RequestRodeo 工具通过在客户和服务器之间充当代理来防止CSRF攻击
  • 客户端下载某些插件,对于拦截的请求用户可以自己设置白名单。

二、解决方法

前端解决方式

1.JSONP方案:(只能解决get请求不能解决post请求)

不受同源策略影响的标签:img、script、link 、iframe

 通过在前端动态创建script标签,指定跨域资源的URL,服务器返回的是一段JavaScript代码,前端通过回调函数处理数据。

2.vue解决devServer配置

module.exports = {devServer: {proxy: {'/api': { // 请求的代称,写在Axios里的BaseUrltarget: 'http://localhost:8088/spring', // 真实请求URlws: true,changeOrigin: true, // 允许跨域pathRewrite: { //替换,通配/api的替换成对应字符//     /* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时//       实际上访问的地址是:http://localhost:8088/spring/core/getData/userInfo,因为重写了 /api//      */'^/api': '' //当你的接口中没有/api字眼时,采用这种,直接替换成空即可//     '^/api': '/api'   //当你的接口中刚好有/api 时,采用这种方式}}}}
}

3.Nginx代理

正向代理:顺着请求方向代理,由用户配置,为用户代理服务。拿到要访问的资源。

反向代理:充当响应服务器,对目标服务器提供了请求转发的功能。

nginx使用的是反向代理:浏览器访问A服务器,A服务器再将请求发送到B浏览器,拿到内容返回给浏览器。

下载negix,完成配置

服务器监听80端口,请求带着“/api”就代理到指定的服务器,也可以配置重写url。

上面的场景:前端发送一个api/xxx请求,negix代理对请求做处理。将这个请求代理到后端服务器,并重写了请求的url。


ssm项目后端表现层解决方案

1.在响应头中添加属性

在controller代码中写下面这行代码。

response.addHeader("Access-Control-Allow-Origin","http://127.0.0.1:8081");

 

springboot项目中,跨域问题后端怎么解决?

CORS:跨域同源共享。在响应头中设置一些配置。access-control-allow-origin属性设置

1.在目标方法上添加@CrossOrigin注解

2.添加cors的过滤器统一解决,不用每个方法都加注解

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter(){CorsConfiguration corsConfiguration=new CorsConfiguration();//允许那些域访问corsConfiguration.addAllowedOrigin("*");//允许请求头字段corsConfiguration.addAllowedHeader("*");//允许请求的方法corsConfiguration.addAllowedMethod("*");UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();//添加映射路径source.registerCorsConfiguration("/**",corsConfiguration);return new CorsFilter(source);}
}

3.实现WebMvcConfigurer接口,重写addCorsMappings方法

   @Overridepublic void addCorsMappings(CorsRegistry registry){registry.addMapping("/**").allowedOrigins("*").allowedMethods("*").allowCredentials(true)  //是否允许携带cookie.maxAge(3600) //有效时间.allowedHeaders("*");}

4.使用代理工具。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/611119.html

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

相关文章

Opentelemetry——Observability Primer

Observability Primer 可观测性入门 Core observability concepts. 可观测性核心概念。 What is Observability? 什么是可观测性? Observability lets us understand a system from the outside, by letting us ask questions about that system without know…

(2022级)成都工业学院数据库原理及应用实验三:数据定义语言DDL

唉,用爱发电连赞都没几个,博主感觉没有动力了 想要完整版的sql文件的同学们,点赞评论截图,发送到2923612607qq,com,我就会把sql文件以及如何导入sql文件到navicat的使用教程发给你的 基本上是无脑教程了,…

【Ubuntu】 Github Readme导入GIF

1.工具安装 我们使用 ffmpeg 软件来完成转换工作1.1 安装命令 sudo add-apt-repository ppa:jonathonf/ffmpeg-3sudo apt-get updatesudo apt-get install ffmpeg1.2 转换命令 (1)直接转换命令: ffmpeg -i out.mp4 out.gif(2) 带参数命令&…

泽众Testone自动化测试平台,测试用例支持单个调试执行,同步查看执行日志

泽众Testone自动化测试平台之前版本,测试用例批量和单个执行,必须要通过测试集操作执行,操作略繁琐,我们通过本轮优化升级,测试用例直接可以单个调试执行,同步查看执行日志,操作上去繁就简&…

SpringCloud集成SkyWalking链路追踪并收集日志

博主介绍:✌全网粉丝5W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验…

解决PROFINET转PROFIBUS DP网关控制水处理系统通讯的问题

在工业自动化的浩渺星空中,PROFINET犹如一颗璀璨的明星,以其高效、稳定和灵活的特性,在以太网通信协议的舞台上大放异彩。然而,即便是在最明亮的星光下,也难免会有阴影存在。在实际应用中,PROFINET转PROFIB…

2024个人动态线条导航HTML源码

源码介绍 2024个人导航HTML源码,源码由HTMLCSSJS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面 源码下载 2024个人导航HTML源码

面试经典算法系列之二叉树3 -- 二叉树的层序遍历

面试经典算法18 - 二叉树的层序遍历 LeetCode.102 公众号:阿Q技术站 问题描述 给你二叉树的根节点 root ,返回其节点值的 层序遍历 。 (即逐层地,从左到右访问所有节点)。 示例 1: 输入:roo…

Python学习之-matplotlib详解

前言: Matplotlib 是一个 Python 的图表绘制库,广泛用于生成各种静态、动态和交互式的图表。它能够创建线图、散点图、条形图、饼图、直方图、误差线图、箱型图、热图、子图网络、散点矩阵等图表。 安装 Matplotlib: pip install matplotli…

KKVIEW远程远程访问家里电脑

远程访问家里电脑:简易指南与价值所在 在数字化时代,电脑已成为我们日常生活和工作中不可或缺的工具。有时,我们可能在外出时急需访问家中电脑里的某个文件或应用,这时,远程访问家里电脑就显得尤为重要。本文将简要介…

计算机网络——交换机和路由器

目录 前言 引言 交换机是用来做什么的? 与路由器有什么区别? 网关 子网掩码 网关、路由 前言 本博客是博主用于复习计算机网络的博客,如果疏忽出现错误,还望各位指正。 这篇博客是在B站掌芝士zzs这个UP主的视频的总结&am…

Ubuntu下配置Android NDK环境

Android-NDK的下载 下载Android-NDK wget -c http://dl.google.com/android/ndk/android-ndk-r10e-linux-x86_64.bin 执行bin文件(即解压) ./android-ndk-r10c-linux-x86_64.bin Android-NDK的配置 要想使用Android-NDK,还需要进行环境变量…