springboot解决js前端跨域问题，javascript跨域问题解决

最近用springboot开发后台接口，但是接口开发好以后，用js请求接口json数据，遇到了烦人的跨域问题，也是找了好久才找到解决方法。下面来讲解下解决步骤。

一，编写Filter过滤器

把下面代码放到你的springboot项目中就可以了

package com.qcl;import org.springframework.stereotype.Component;import java.io.IOException;import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;/*** 处理跨域问题*  qcl：微信2501902696*/
@Component
public class OriginFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic 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,PUT");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "x-requested-with");chain.doFilter(req, res);}@Overridepublic void destroy() {}
}
复制代码

二，用js做下请求验证下

如我们需要请求https://localhost:8443/pv/2048/list 获取如下数据，https://localhost:8443/pv/2048/list是我部署在服务器上的，2020年到期，你也可以访问

{"code": 100,"msg": "成功","data": 3
}
复制代码

对应的js请求代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js+springboot解决跨域请求</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>var baseUrl = "https://30paotui.com";$(document).ready(function () {$("button").click(function () {$.ajax({url: baseUrl + "/pv/2048/list", success: function (result) {document.getElementById("p1").innerHTML = result;var str = JSON.stringify(result); //将JSON对象转化为JSON字符var obj = JSON.parse(str); //由JSON字符串转换为JSON对象console.log(str);console.log(obj);console.log(obj.data);console.log(result.msg);console.log(result.code);}});});});
</script>
<p id="p1"></p>
<button>获取其他内容</button></body>
</html>
复制代码

请求效果如下

有任何关于编程的问题都可以留言或者私信我，我看到后会及时解答

编程小石头，码农一枚，非著名全栈开发人员。分享自己的一些经验，学习心得，希望后来人少走弯路，少填坑。

转载于:https://juejin.im/post/5cf08dbe51882533ef7f8bb9

springboot解决js前端跨域问题，javascript跨域问题解决相关推荐

jquery 跨域_springboot解决js前端跨域问题，javascript跨域问题解决
最近用springboot开发后台接口,但是接口开发好以后,用js请求接口json数据,遇到了烦人的跨域问题,也是找了好久才找到解决方法.下面来讲解下解决步骤. 一,编写Filter过滤器把下面代码 ...
name optimize is not defined 怎么解决_Web前端：怎么在JavaScript中比较对象？
大家好,我来了,本期为大家带来的前端开发知识是"Web前端:怎么在JavaScript中比较对象?",有兴趣做前端的朋友,一起来看看吧! 比较JavaScript中的原始值很简单. ...
Javascript跨域问题总结
疯狂的JSONP 关于JSON与JSONP简单总结 window.name实现的跨域数据传输 JavaScript跨域总结与解决办法 flash跨域策略文件crossdomain.xml配置详解转载 ...
html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
firefox如何载入json文件_如何去解决JS跨域问题怎么能学好Web前端开发
如何去解决JS跨域问题?怎么能学好Web前端开发?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
[转] js前端解决跨域问题的8种方案（最新最全）
[转] js前端解决跨域问题的8种方案(最新最全) 参考文章: (1)[转] js前端解决跨域问题的8种方案(最新最全) (2)https://www.cnblogs.com/chris-oil/p/ ...
jQuery(三) javascript跨域问题(JSONP解决)
加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
jsonp-反向代理-CORS解决JS跨域问题的个人总结
jsonp-反向代理-CORS解决JS跨域问题的个人总结网上说了很多很多,但是看完之后还是很混乱,所以我自己重新总结一下. 解决 js 跨域问题一共有8种方法, jsonp(只支持 get) 反向代 ...
SpringBoot解决跨域问题的六种方式
一.同源策略同源,就是咱们域名.端口号.ip.采用的协议都相同,那么我们就是同源的反之就是不同源的!!! 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览 ...

springboot解决js前端跨域问题，javascript跨域问题解决

一，编写Filter过滤器

二，用js做下请求验证下

springboot解决js前端跨域问题，javascript跨域问题解决相关推荐

最新文章

热门文章