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实现跨域问题的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
kuayu react_React+Spring实现跨域问题的完美解决方法相关推荐
- 浏览器禁止跨域请求json数据解决方法--jsonp
浏览器禁止跨域请求json数据解决方法--jsonp 参考文章: (1)浏览器禁止跨域请求json数据解决方法--jsonp (2)https://www.cnblogs.com/uyisi/p/56 ...
- PHP解决http和https跨域,php中http与https跨域共享session的解决方法
这篇文章主要介绍了http与https跨域共享session的解决方法,需要的朋友可以参考下 遇到了HTTP.HTTPS协议下session共享解决cookie失效的问题,这里提供一个临时解决办法. ...
- 造成跨域的原因和解决方法
造成跨域的原因和解决方法 参考文章: (1)造成跨域的原因和解决方法 (2)https://www.cnblogs.com/wangpenghui522/p/6284355.html 备忘一下.
- 跨域问题及常见解决方法---以 Geoserver 为例
跨域问题及常见解决方法---以 Geoserver 为例 跨域问题 跨域简介 解决跨域常用方法 前端代理 后端处理 其他代理(nginx) Geoserver 解决跨域 免费解决跨域工具:[geose ...
- PHP的介绍及应用,ajax的介绍及应用,跨域问题及jsonp解决方法
PHP(服务器编程语言) 服务器由环境(Apache),数据库(mysql),代码(HTML+css +js,php)组成. PHP必须在服务器的环境下执行 php与js最大的区别就是工作环境,PHP ...
- [Vue.js]跨域访问四种解决方法
2019独角兽企业重金招聘Python工程师标准>>> 报错: has been blocked by CORS policy: Response to preflight requ ...
- thinkphp ajax 跨域请求 Access-Control-Allow-Origin 完美解决
在前后端分离的开发中,前端经常遇到请求接口跨域的问题 遇到这种问题,解决方法有两种: 方法一.用jsonp的格式返回数据给前端,而不是json,这个方法治标不治本,需要注意的是,使用jsonp的时候, ...
- 跨域的知识和解决方法
1.https://segmentfault.com/a/1190000000709909 2.https://blog.csdn.net/qq_38128179/article/details/84 ...
- 关于jsonp跨域的问题以及解决方法(跨域、同源与非同源)
什么是跨域? 想要了解跨域,首先需要了解下浏览器的同源机制: JSONP和AJAX相同,都是客户端向服务器端发送请求:给服务器端传递数据 或者 从服务器端获取数据 的方式 JSONP属于非同源策略(跨 ...
最新文章
- 计算机科学与技术考研专业课网课,考研计算机专业课视频教学哪个好
- Boost::filesystem的使用笔记
- 带有调试器的Apache Camel Eclipse工具
- [css] 你有用过弹性布局吗?说说你对它的理解
- VC++中忽略所有默认库纯Win32 API编译及链接 - 计算机软件编程 - Wangye's Space
- LeetCode--139. 单词拆分(动态规划)
- Flume Sink
- 壕!腾讯再公布股权激励:2.97万员工 人均49万港元
- 聊聊hystrix的semaphore.maxConcurrentRequests属性
- consul服务下线通知_服务注册中心如何实现秒级服务上下线通知 | SOFARegistry 解析...
- python加载mnist数据集
- arm电子相册项目——启动加载篇startup.s
- 十大验证码解决方案服务比较
- soap java实现_Java实现SOAP协议
- 树莓派查看CPU温度
- APP跟网址最常见的攻击和防守
- 四点之间最短路(spfa+优先队列+枚举优化)UESTC1955喜马拉雅山上的猴子
- 嵌入式应用层开发要学习什么
- 【毕业设计源码】基于微信小程序的校园活动管理系统的设计与实现
- ios重签名shell脚本_03:双层签名和重签名流程以及shell脚本重签名
热门文章
- ASP.Net防范XSS漏洞攻击的利器HtmlSanitizer
- ASP.NET Core 整合Autofac和Castle实现自动AOP拦截
- Visual Studio Code 1.3终于增加了标签页
- 使用Filezilla 与 linux远程服务器传输文件时,设置默认打开编辑器
- zblog php 标题优化,Zblog分类页标题重复的优化 - 张力博客
- okhttputils java_Java OkHttpUtils.post方法代码示例
- Chrome 双击关闭标签,新窗口打开新地址,一个插件搞定,安装方便,自带hosts
- 【专升本计算机】2021年甘肃省专升本计算机全真模拟试题(五)
- 【MATLAB统计分析与应用100例】案例006:matlab数据的标准化变换
- 史上最全的Visual Studio Code安装C/C++环境,若不行头砍给你。