jquery 跨域_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
}
![](/assets/blank.gif)
对应的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>
请求效果如下
![](/assets/blank.gif)
有任何关于编程的问题都可以留言或者私信我,我看到后会及时解答
编程小石头,码农一枚,非著名全栈开发人员。分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑。
jquery 跨域_springboot解决js前端跨域问题,javascript跨域问题解决相关推荐
- name optimize is not defined 怎么解决_Web前端:怎么在JavaScript中比较对象?
大家好,我来了,本期为大家带来的前端开发知识是"Web前端:怎么在JavaScript中比较对象?",有兴趣做前端的朋友,一起来看看吧! 比较JavaScript中的原始值很简单. ...
- springboot解决js前端跨域问题,javascript跨域问题解决
最近用springboot开发后台接口,但是接口开发好以后,用js请求接口json数据,遇到了烦人的跨域问题,也是找了好久才找到解决方法.下面来讲解下解决步骤. 一,编写Filter过滤器 把下面代码 ...
- java 跨域_springboot解决跨域CROS问题,用注解@CrossOrigin
项目是springboot框架,前后端分离,需要跨域,当前前端可以用JSONP解决,但是java端如何解决呢? 因为是springboot框架,所以好多都可以用注解解决问题,所以就用到了@CrossO ...
- html2canvas微信头像跨域,企业微信头像 前端使用canvas处理时跨域
拿到的企业微信头像是正方形 我需要使用canvas处理成圆形 但处理时发现会有跨域问题 正常微信的图片就没有问题 只有企业微信的域名头像会提示跨域 const canvas = document.cr ...
- javascript跨域实践
上次我转载了一篇 [转]JavaScript最全的10种跨域共享的方法 ,仔细研读,终于对跨域有了一些些了解,做了几个demo加深印象. 1.jsonp 方式跨越: 我首先新建一个服务端页面: jso ...
- 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跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
最新文章
- MVP模式的相关知识
- Python清华源或豆瓣源安装包
- 字符串匹配——RabinKarp算法
- 只有一条数据线了?iOS 14暗示苹果不在iPhone 12中附赠耳机
- Windows Server 2012 +WDK7600.16385.1+VS2008驱动开发环境搭建
- Google 开源下一代高安全性机密运算开发框架 Asylo
- C# 代码调整屏幕分辨率
- 【C/C++】符号常量 常变量
- dump排查内存异常 java_如何排查Java应用内存泄漏问题
- 跟我一起做面试题-linux线程编程(2)
- 跨浏览器resize事件分析
- zz JQuery 插件
- SignalTap II使用技巧_2
- protel99实用基础入门教程
- git clone报错warning:Clone succeeded,but checkout failed
- vb msgbox各种图标样式及按钮样式
- 076 对称区间的定积分性质
- 身份认证协议攻击:黑客不希望你了解的事情
- 旧 Mac、PC 别扔,变身 Chromebook 了解一下
- 送书送书送书,(包邮)送,仅此而已!
热门文章
- 安装sql server 2008 management studio时,提示升级VS2008 到 SP1
- 用链表队列实现基数排序;
- 自定义SharePoint Webservice
- 《C++编程——数据结构与程序设计方法》程序范例:影碟店(源代码)
- Java多线程详解(基本概念)
- 数据结构与算法之-----图(代码实现)
- python与html关系,python - jinja2模板、框架和html是什么关系?
- 全国计算机汉字录入是什么,什么是汉字录入?
- Python+OpenCV:图像二进制鲁棒独立基本特征(BRIEF, Binary Robust Independent Elementary Features)
- android wifi 问题是什么意思,Android应用开发之wifi连接问题:密码正确但连接时supplicant state返回的是ERROR_AUTHENTICATING...