前后端分离开发中,跨域问题是很常见的一种问题。本文主要是解决 springboot 项目跨域访问的一种方法,其他 javaweb 项目也可参考。

1.首先要了解什么是跨域

由于前后端分离开发中前端页面与后台在不同的服务器上,必定会出现跨区问题。关于更具体的信息,可以看这里:不要再问我跨域的问题了

2.springboot中通过配置Filter来解决跨域问题
2-1.首先看一下会出现跨域问题的代码:

前端代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/vendor/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url = 'http://127.0.0.1:8080/example/testget';
var args = {"time" : new Date()};
//get请求
$.get(url, args, function(data){
        alert(data);
});
//禁止页面跳转
return false;
});
});
</script>
</head>
<body>
<h1>Test</h1>
<li><a href="">click</a></li>
</body>
</html>

出现了跨域问题:

后端代码:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map; @RestController
@RequestMapping(value = "/example")
public class CrosTestController { @GetMapping(value = "/testget")
public Map<String, String> testGet(){
Map<String, String> testMap = new HashMap<>();
testMap.put("name", "jack");
//用来打印验证后端代码确实执行了,即该接口确实被访问了
System.out.println("执行了!");
return testMap;
}
}
2-2.解决问题:

无需改动前端代码,在 springboot 项目中添加全局过滤器:

import com.example.filter.CrosFilter;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean; @SpringBootApplication
public class exampleApplication { public static void main(String[] args) {
SpringApplication.run(exampleApplication.class, args);
} /**
* 配置跨域访问的过滤器
* @return
*/
@Bean
public FilterRegistrationBean registerFilter(){
FilterRegistrationBean bean = new FilterRegistrationBean();
bean.addUrlPatterns("/*");
bean.setFilter(new CrosFilter());
return bean;
}
}

过滤器:

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException; public class CrosFilter implements javax.servlet.Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException { } @Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse res = (HttpServletResponse) servletResponse;
//*号表示对所有请求都允许跨域访问
res.addHeader("Access-Control-Allow-Origin", "*");
res.addHeader("Access-Control-Allow-Methods", "*");
filterChain.doFilter(servletRequest, servletResponse);
} @Override
public void destroy() { }
}

再看前端访问结果,已经可以正常访问了:

【补充】其实跨域问题还有其它的解决方法,这里有一个关于跨域问题的课程,把跨域及其处理方法讲的很清楚,学习链接:ajax跨域完全讲解

Springboot中关于跨域问题的一种解决方法的更多相关文章

  1. Ajax跨域问题的两种解决方法

    浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...

  2. Javascript跨域请求的几种解决方法

    什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到 ...

  3. vue 使用axios 出现跨域请求的两种解决方法

    最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案. 1:服务器端设置跨域 header(“Access-Control-Allow-Origin:*”); h ...

  4. ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法

    原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法 群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebServi ...

  5. springboot中 后端跨域的实现配置

    在springboot的启动文件中,添加此内容,可以允许跨域

  6. WEX5中ajax跨域访问的几种方式

    1.使用jsonp方式 使用jsonp访问的话,前端需要把回调函数名传递给后端,后端执行完后也需要把回调函数传回给前端,默认情况下ajax自动生成一个回调函数名,后端可以通过String callba ...

  7. jsonp 跨域Uncaught SyntaxError: Unexpected token :解决方法

    [jQuery]Ajax实现跨域访问JSON Ajax跨域访问JSON 环境:.net4.0+jQuery+JSON.net 因为在跨域实现,所以这里新建网站,这个网站只需要Ashx文件 public ...

  8. 解决No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource.跨域问题(后台(java)解决方法)

    附:前端常见跨域解决方案(全) 跨域错误 解决方法 在后台写一个过滤器来改写请求头 附上一个前端不知所以然的后台java代码: public class CorsFilter implements F ...

  9. 关于八数码问题中的状态判重的三种解决方法(编码、hash、&amp;lt;set&amp;gt;)

    八数码问题搜索有非常多高效方法:如A*算法.双向广搜等 但在搜索过程中都会遇到同一个问题.那就是判重操作(假设反复就剪枝),怎样高效的判重是8数码问题中效率的关键 以下关于几种判重方法进行比較:编码. ...

随机推荐

  1. tbr tbn tbc

    http://tech.bobgo.net/?m=201004 因为最近的工作需要从MP4视频中提取一些关键帧,要了解如何将视频的时间点转换为对应的帧号,所以查阅了一些关于视频编解码以及时间同步方式的 ...

  2. Android(java)学习笔记260:JNI之native方法头文件的生成

    1. JDK1.6 ,进入到工程的bin目录下classes目录下: 使用命令: javah  packageName.ClassName 会在当前目录下生成头文件,从头文件找到jni协议方法 下面举 ...

  3. Mongodb 安装和启动

    一.首先去官网下载对应的的mongodb ,本人的操作系统是win7 64位 mongodb-win32-x86_64-2.0.6.rar 解压安装:进入到bin目录下,会看到N多的.exe文件 二. ...

  4. Ext 随笔

    /-------------------------//清空panel等后面空白属性//------------------------- baseCls:"x-plain" // ...

  5. WPF Template模版之DataTemplate与ControlTemplate【一】

    WPF Template模版之DataTemplate与ControlTemplate[一] 标签: Wpf模版 2015-04-19 11:52 510人阅读 评论(0) 收藏 举报  分类: -- ...

  6. 【论文:麦克风阵列增强】An alternative approach to linearly constrained adaptive beamforming

    作者:桂. 时间:2017-06-03  21:46:59 链接:http://www.cnblogs.com/xingshansi/p/6937259.html 原文下载:http://pan.ba ...

  7. C# 枚举器

    1:枚举器和可枚举类型 我们知道使用foreach可以遍历数组中的元素.那么为什么数组可以被foreach语句处理呢,下面我们就进行讨论一下这个问题. 2:使用foreach语句 我们知道当我们使用f ...

  8. python发送手机动态验证码

    一.准备短信发送平台 首先进入http://user.ihuyi.com/nav/sms.html互亿天线,并且注册,进入首页 注册后会免费送50条消息 注册完后进入验证码通知短信,复制自己的api接 ...

  9. surging+CentOS7+docker+rancher2.0 入门部署教程

    准备工作 开发环境  Visual Studio 2017 15.5 运行环境  虚拟机CentOS 7+Docker+Rancher 2.0+Consul+RabbmitMQ 项目下载地址  htt ...

  10. Spark常见问题汇总

    原文地址:https://my.oschina.net/tearsky/blog/629201 摘要: 1.Operation category READ is not supported in st ...