前后端分离开发中，跨域问题是很常见的一种问题。本文主要是解决 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. [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

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

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

  7. SpringBoot 中实现跨域的几种方式

    一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. ...

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

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

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

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

随机推荐

  1. windows环境下curl 安装和使用

    原文:https://blog.csdn.net/qq_21126979/article/details/78690960?locationNum=10&fps=1 一.curl 安装 cur ...

  2. codeforces 813E 主席树

    题意: 一个数列多组询问,每次询问[l,r]中最多能选多少个数字,其中每个数字的出现次数不超过k次 题解: 我们保存对于每个位置上,出现超过k次的位置,那么对于每次询问,我们就变成了查询区间[l,r] ...

  3. Gitlab_ansible_jenkins三剑客④jenkins安装图解及freestyle的简单使用

    java环境准备 # 安装jdk1.8 [root@node02 ~]# rpm -ivh jdk-8u181-linux-x64.rpm vim /etc/profile export JAVA_H ...

  4. Go语言--基础语法笔记

    ### 换了工作,好久没有添加新文章了,本来是想更新到github上的,想想还是在博客里放着,感觉以前的文章都没有很仔细,都只是问题处理的记录, 以后想新加一些整理的笔记也好 ### 主要内容 2.1 ...

  5. HDU-魔咒词典(字符串hash)

    魔咒词典 TimeLimit: 8000/5000 MS (Java/Others)  MemoryLimit: 32768/32768 K (Java/Others) 64-bit integer ...

  6. maven父子模块deploy 问题

    1.问题描述:直接 deploy 子某块,但第三者确不能引用 jar(jar down不下来,但pom不报错) 原因:父子模块项目必须保证父模块pom deploy后,再 deploy 子模块才能被引 ...

  7. 阿里云服务器配置https(port443)后客户端 svn check out 失效解决办法

    1. 客户端环境 1. 操作系统:Windows 7 2. svn客户端:TortoiseSVN 2. 服务端环境 1. 云服务平台:阿里云 2. 操作系统:Windows Server 2008 R ...

  8. Eclipse：An error has occurred. See error log for more details. java.lang.NullPointerException

    问题描述   在使用 Eclipse Clean 项目时报错:An error has occurred. See error log for more details. java.lang.Null ...

  9. cocoapods 创建公开公共库

    1 :首先安装了 pod,sourceTree(下载地址https://pan.baidu.com/s/1c1Wc5ck), 并在开元中国申请的 git 账号 2 :打开终端: cd 文件目录地址(任 ...

  10. nginx代理tcp协议连接mysql

    阅读目录 一.mariadb安装及配置 1.1 在192.168.182.155安装mariadb 1.2 配置MariaDB的字符集 1.3  添加用户,设置权限 1.4 防火墙设置 二.nginx ...