前后端分离框架前端react,后端springboot跨域问题分析
前后端分离框架前端react,后端springboot跨域问题分析
为啥跨域了
由于前后端不在一个端口上,也是属于跨域问题的一种,所以必须解决这个问题.
前端react的设置
react设置我这里使用了fetch方式请求后端接口,所以在fentch方法里设置两个参数:
- mode: “cors”;这是前端允许跨域的设置
- credentials: ‘include’;由于我需要把浏览器的cookie传入后端,所以需要这个设置
springboot后端设置
直接上配置说吧
// An highlighted block
@Configuration
public class CorsConfig implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
String path = request.getServletPath();
//前端react项目的域名
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
response.setHeader("Access-Control-Max-Age", "3600");
//设置允许访问cookie
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
if (request.getMethod().equals("OPTIONS")) {
response.setStatus(HttpServletResponse.SC_OK);
}else{
chain.doFilter(request, res);
}
}
@Override
public void destroy() {
}
}
由于一开始没有设置关于请求OPTIONS的设置,导致我的put,delete请求都会发送2次请求到后端,并且报错,说跨域问题,但是我这里已经做了跨域配置,所以应该不是这个问题。
if (request.getMethod().equals("OPTIONS")) {
response.setStatus(HttpServletResponse.SC_OK);
}else{
chain.doFilter(request, res);
}
}
后来翻阅了一些资料后,发现http请求,关于请求方法:get,post是基本请求,但是对于put,delete等其他请求时,浏览器会先发送一个"PreFlight"请求,这个是一个预请求。所以,当发现是这种预请求的时候,后台需要返回200的状态。这样配置完后,就ok了。
前后端分离框架前端react,后端springboot跨域问题分析的更多相关文章
- 前后端分离 开发环境通过CORS实现跨域联调
通过JSONP实现跨域已是老生常谈,JSONP跨域限制多,最近了解了一下CORS. 参考: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Acce ...
- Nginx完美解决前后端分离端口号不同导致的跨域问题
笔者在做前后端分离系统时,出现了很多坑,比如前后端的url域名相同,但是端口号不同.例如前端页面为:http://127.0.0.1/ , 后端api根路径为 http://127.0.0.1:888 ...
- Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题
原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...
- [原创]基于VueJs的前后端分离框架搭建之完全攻略
首先请原谅本文标题取的有点大,但并非为了哗众取宠.本文取这个标题主要有3个原因,这也是写作本文的初衷: (1)目前国内几乎搜索不到全面讲解如何搭建前后端分离框架的文章,讲前后端分离框架思想的就更少了, ...
- Vue .Net 前后端分离框架搭建
[参考]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 一.前端开发环境搭建 1.零基础 Vue 开发环境搭建 打开运行Vue项目 2.nodejs http-proxy-middle ...
- Thinkphp5.0+Vue2.0前后端分离框架Vuethink
VueThink是一套基于Vue全家桶(Vue2.x + Vue-router2.x + Vuex)+ Thinkphp的前后端分离框架. 脚手架构建也可以通过vue官方的vue-cli脚手架工具构建 ...
- GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)
GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频) GraphQL + React Apoll ...
- Flask框架踩坑之ajax跨域请求
业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应 ...
- React网络请求跨域代理设置
之前的之所以可以请求其他域名下的网络数据,是因为我们在服务端设置了相关配置,如下所示 如果将其注释掉,再次测试,如下所示 此时便无法跨域操作,接下来介绍下React如何实现跨域代理 (1)分析 Rea ...
随机推荐
- Google SketchUp Cookbook: (Chapter 4) Advanced Intersect and Follow Me Techniques
软件环境 SketchUp Pro 2018 参考书籍 Google SketchUp Cookbook Intersect 工具经常与 Follow Me 工具一起使用,以创建复杂的 3D 物体. ...
- 软件推荐----截图软件Snagit
截图软件,比较推荐使用Snagit,功能上所有截图软件有的他都有.Snagit编辑器有一个[库]功能,可以按日期以及应用程序对截图进行分类整理,最赞的是你可以把整个库备份导出,在新的电脑上进行导入,所 ...
- Java 环境配置 与 碰到的问题
小白记录,希望各位指点,长期整理修改 不定期更新,碰到的与之相关的会添加,做个小笔记,再次碰到可以更好的解决. JDK 下载:Oracle 配置方法:菜鸟教程 - Java 开发环境配置 作用 JAV ...
- 入坑Intel OpenVINO:记录一个示例出错的原因和解决方法
今天试用OpenVINO的例子,在过程中发现了一些其他人没有经历的坑特别记录一下. 出错时候:执行Intel OpenVINO示例的是时候,出错的提示代码: 用于 .NET Framework 的 M ...
- golang初识2
1. 赋值与申明 str := "Hello, WebAssembly" // 简短声明 标准格式: var str string str = "Hello, WebAs ...
- 【HDFS API编程】副本系数深度剖析
上一节我们使用Java API操作HDFS文件系统创建了文件a.txt并写入了hello hadoop(回顾:https://www.cnblogs.com/Liuyt-61/p/10739018.h ...
- PHP Yii2.0PHPexecl导出。
use phpoffice\phpexcel; public function actionExport(){ $objPHPExcel = new \phpexcel; $objPHPExcel - ...
- jquery选择器问题(找东西超级有用)
$("[class='slider-container theme-green']").css('width','100%');就这么一行代码,很简单,这样就很容易找到唯一元素
- 深入理解Java虚拟机读书笔记5----虚拟机字节码执行引擎
五 虚拟机字节码执行引擎 1 运行时栈帧结构 ---栈帧是用于支持虚拟机进行方法调用和方法执行的数据结构,是虚拟机运行时数据区中的虚拟机栈的栈元素. ---栈帧中存储了方法的局部变 ...
- swing 嵌入浏览器
需求要在swing加一个浏览器,在网上找了一个挺方便的方法,现在把代码贴上来 力求方便. package com.vtradex.page.shipment; import static javafx ...