kuayu react_React+Spring实现跨域问题的完美解决方法

最近小编在学习react,在学习过程中遇到React+Spring实现跨域问题,下面小编记录了整个问题过程,给大家做个参考。

react 跨域访问后台,默认是有跨域问题,并且火弧和谷歌浏览器,对跨域问题展示还不一样.

谷歌浏览器如下图:

此处状态是200,然而在Response却没有任何信息,如下图

然而火弧浏览器,对该问题的描述,就清淅得多,

火弧浏览器告诉我们,跨域了,关于react跨域的帖子,网上也有相关帖子,搜索到的方法,大约都是如下解决方式:

如果你是通过creat-react-app构建的项目,请在package.json文件中的根目录下,添加"proxy": "http://api.xxxx.com",如果你的项目,需要调用多个不同ip的接口,请使用如下配置:

"proxy": {

"/api/RoomApi": {

"target": "http://open.douyucdn.cn",

"changeOrigin":true

},

"/api/v1":{

"target":"http://capi.douyucdn.cn",

"changeOrigin":true

}

}

配置完成后,再次访问接口,还是出现一样的跨域问题,既然recat的配置,未解决跨域问题,我就把思路转到spring,在spring去处理跨域,

package com.gg.interceptor;

import java.util.ArrayList;

import java.util.List;

import java.util.Vector;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.HandlerInterceptor;

import org.springframework.web.servlet.ModelAndView;

public class ProcessInterceptor implements HandlerInterceptor{

@Override

public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object handler)

throws Exception {

// TODO Auto-generated method stub

// 指定白名单域名 http://localhost:8000,http://localhost:8000

List whileList = new Vector();

whileList.add("http://127.0.0.1:8000");

whileList.add("http://localhost:8000");

String clientIp = httpServletRequest.getHeader("origin");

boolean status = false;

for(String ip : whileList) {

if(clientIp!=null&&clientIp.equals(ip)) {

status = true;

break;

}

}

/**

* 网上解决方案是httpServletResponse.setHeader("Access-Control-Allow-Origin","*");设置后发现,还是不能处理跨域问题,需要指定某一个ip,如:http://127.0.0.1:8000

* */

httpServletResponse.setHeader("Access-Control-Allow-Origin",status?clientIp:null);

//响应头设置

httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");

//响应类型

httpServletResponse.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

httpServletResponse.setHeader("X-Powered-By","Jetty");

httpServletResponse.setHeader("Access-Control-Allow-Credentials","true");

String method= httpServletRequest.getMethod();

if (method.equals("OPTIONS")){

httpServletResponse.setStatus(200);

return false;

}

System.out.println(method+",status:"+status+",clientIp:"+clientIp);

return true;

}

@Override

public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,

ModelAndView modelAndView) throws Exception {

// TODO Auto-generated method stub

}

@Override

public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)

throws Exception {

// TODO Auto-generated method stub

}

}

react客户端代码如下:

Model层js代码:

*login({ payload }, { call, put }){

let formData = new FormData();

formData.append("loginId",payload.loginId);//账号

formData.append("passWord",payload.passWord);//密码

const response = yield call(requestGuangGao, formData);

yield put({

type: 'changeLoginStatus',

payload: response,

});

},

api层js代码:

export async function requestGuangGao(formData){

// let formData = new FormData();

// formData.append("loginId",params.loginId);

// formData.append("passWord",params.passWord);

console.log("requestGua >url :" );

return request('http://127.0.0.1:8080/guanggao/userController/login.do', {

method: 'POST',

mode: 'cors',

body:formData,

});

}

通过以下设置,react跨域问题就处理好了。

总结

以上所述是小编给大家介绍的React+Spring实现跨域问题的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

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

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

相关文章

奇妙的二叉树:Huffman的贡献

提起 Huffman 这个名字,程序员们至少会联想到二叉树和二进制编码。的确,我们总以 Huffman 编码来概括 D.A.Huffman 个人对计算机领域特别是数据压缩领域的杰出贡献。我们知道,压缩 模型 编码,作为一种压缩方法,我们必…

计算机专业暑期三下乡活动方案,暑期三下乡活动方案

要坚持立德树人,突出实践育人,引导广大青年在实践中受教育、长才干、作贡献,出国留学网小编整理了以下内容“大学生‘三下乡’实践活动方案”,供大家参考!大学生“三下乡”实践活动方案一、活动主题扶贫建功青春行二、…

iNeuOS工业互联操作系统,图表与数据点组合成新组件,进行项目复用

目 录1. 概述... 12. 演示信息... 23. 应用过程... 21. 概述针对有些行业的数据已经形成了标准化的建模或者有些公司专注于某个领域,对于开发业务有很多情况需求进行复用,以前的版本和文章介绍了图元及数据点的组合形成新的图元进…

通过对象属性去重_Redis常见对象类型的底层数据结构

作者:伍陆七来源:cnblogs.com/chentianming/p/13838347.htmlRedis 是一个基于内存中的数据结构存储系统,可以用作数据库、缓存和消息中间件。Redis 支持五种常见对象类型:字符串(String)、哈希(Hash)、列表(List)、集合(Set)以及有…

按照演算,整个宇宙将会陷入无边的黑暗

导读:能量守恒定律告诉我们:能量既不会凭空产生,也不会凭空消失,它只会从一种形式转化为另一种形式,或者从一个物体转移到其它物体,而能量的总量保持不变。熵作为只增不减的物质,该怎么去理解它…

xp计算机启动检测硬盘,取消WinXP开机自检技巧五则

有时我们正常关闭计算机后,再次开机时发现系统会出现自行检测,这让许多XP用户们感到不方便,那么该怎么取消XP开机自检呢?下面就是具体的方法了,一起来看看吧。方法①:假如分区是FAT32格式,将其转…

Java ClassLoader

Java ClassLoader (1) – What is a ClassLoader? Java ClassLoader (2) – Write your own ClassLoader Java ClassLoader (3) – Namespaces Java ClassLoader (4) – Loading a custom ClassLoader on JVM start

ASP.NET Core和json请求这样用真简单,axios、微信小程序得救了

本文介绍了一种在ASP.NET Core MVC/ASP.NET Core WebAPI中,将axios等前端提交的json格式请求数据,映射到Action方法的普通类型参数的方法,并且讲解了其实现原理。一、为什么要简化json格式请求的参数绑定在ASP.NET Core MVC/ ASP.NET Core We…

10 邮件槽_员工主动发离职邮件,提出申请又反悔,法院判决让人懵了!

前言:很多职场人从来不把劳动法当作一项技能,一遇到事,瞬间就傻。还有部分职场人,什么事都不做,只会说劳动法没有用。就笔者认识的一部分大厂员工,他们现在已经把每天视频打卡跟录音取证作为一项日常工作来…

干货|机器学习零基础?不要怕,吴恩达机器学习课程笔记2-多元线性回归

吴恩达Coursera机器学习课系列笔记课程笔记|吴恩达Coursera机器学习 Week1 笔记-机器学习基础1Linear Regression with Multiple Variables紧接上一篇的例子 – 房价预测。现在我们有更多的特征来预测房价了,“房间的数量”、“楼层”、“房龄”……说明一下接下来要…

技能高考本科计算机类,技能高考多少分上本科

技能高考总分为700分,包括专业技能满分490分,文化课满分210分。能上大学只要总分300往上都可以。如果是本科的话,每个专业的分数线不一样,少的在400分左右,多的比如会计类专业的话可能要到500以上才能报考本科院校。什…

池化对象 RecyclableMemoryStream 在 .netcore 中的使用

Microsoft.IO.RecyclableMemoryStream 是一个被设计为专门用于提高 Stream 操作的高性能类库,意思很明显,专用于取代 MemoryStream 而生,RecyclableMemoryStream 可以最大限度的避免 Stream 操作在 GC 上的 LOH (大对象堆&#xf…

ASP.NET中过滤HTML字符串的两个方法

先记下来&#xff0c;以作备用&#xff01;///<summary>去除HTML标记 //////</summary>///<param name"Htmlstring">包括HTML的源码</param>///<returns>已经去除后的文字</returns>publicstaticstringGetNoHTMLString(s…

新增一个主键自增长_MyBatis 示例-主键回填

测试类&#xff1a;com.yjw.demo.PrimaryKeyTest自增长列数据库表的主键为自增长列&#xff0c;在写业务代码的时候&#xff0c;经常需要在表中新增一条数据后&#xff0c;能获得这条数据的主键 ID&#xff0c;MyBatis 提供了实现的方法。StudentMapper.xml<insert id"…

干货|机器学习零基础?不要怕,吴恩达课程笔记第三周!逻辑回归与正则

吴恩达Coursera机器学习课系列笔记课程笔记|吴恩达Coursera机器学习 Week1 笔记-机器学习基础干货|机器学习零基础&#xff1f;不要怕&#xff0c;吴恩达机器学习课程笔记2-多元线性回归1Logistic Regression1.1 Logistic Regression (Classification) Model之前对房价的预测&a…

计算机网络互联网技术实验报告,2013计算机网络技术与应用.实验报告01

本报告 6 月 5 日前完成。 此框阅读后删除。 此处填写&#xff1a;年级和姓名。 《计算机网络技术与应用》实验报告 此框阅读后删除。 年级、专业、班级 实验题目 实验时间 实验成绩 2013.4.1 11 级 专业 班 姓名计算机网络应用软件与拓扑结构实验地点 实验性质 DS1422■验证性…

如何在C#中使用 ArrayPool,MemoryPool

对资源的可复用是提升应用程序性能的一个非常重要的手段&#xff0c;比如本篇要分享的 ArrayPool 和 MemoryPool&#xff0c;它们就有效的减少了内存使用和对GC的压力&#xff0c;从而提升应用程序性能。什么是 ArrayPool System.Buffers 命名空间下提供了一个可对 array 进行复…

LAMP攻略: LAMP环境搭建,Linux下Apache,MySQL,PHP安装与配置

之前写过一个red hat 9下的LAMP环境的配置&#xff0c;不过由于版本比较旧&#xff0c;很多不适用了。 所以决定写一个新的LAMP环境搭建与配置教程。本配置是在 CentOS-5.3 下 httpd-2.2.11.tar.gz MySQL-client-community-5.1.33-0.rhel5.i386.rpm MySQL-devel-community-5.1…

canvas 实现图片局部模糊_Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js

Canvas实现毛玻璃效果解决方式1&#xff1a;使用stackblur.js在Android系统中实现图片的毛玻璃效果比较好用的类库是&#xff1a;Android StackBlur简单API说明&#xff1a;API 调用下面是针对不同的源(图片或者 Canvas 等)进行 StackBlur 的调用。图像作为源:StackBlur.image(…

服务器自动删文件,服务器定时删除文件工具

服务器定时删除文件工具&#xff0c;这是一个定时删除服务器上文件的小程序修改配置文件config.ini&#xff0c;dir是主目录;dirs是要删除文件目录;deltype是删除类型,0是创建日期,1是修改日期;delday是保留天数;deltime是定时删除时间。[config]dir\\cb19\pictifdirs01,02,03,…