前后端分离开发中，跨域问题是很常见的一种问题。本文主要是解决 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. pptpd免radius限速、限连接+自由定制功能脚本

    因为就几个用户懒得上radius,所以手写了一个用户管理脚本. 脚本很简单,具体直接看repo吧. https://github.com/esxgx/pptpd-exscripts

  2. zigbee 信道

      以zigbee  nxp5169 信道是:11-26    15d0f1-170923    15 ----- 信道 d0f1--- 是zigbee 物理地址 170923---时间2017年9月 ...

  3. layUI实现可选项 弹框

    需求描述:点击插入,会让选择,插入的类型,选择之后,点击确定,执行后续的一些操作.先摆效果图. 代码: //html代码<style> #imp{ display: none; }< ...

  4. LoadRunner结果分析与生成报告

    启动Analysis会话 1.打开HP LoadRunner2.打开LoadRunner Analysis在LoadRunner Analysis选项卡中单击分析负载测试3.打开Analysis会话文 ...

  5. vertx模块HAManager高可用

    HAManager public HAManager(VertxInternal vertx, DeploymentManager deploymentManager, ClusterManager ...

  6. python-shutil学习

    shutil:高级的 文件.文件夹.压缩包 处理模块 1. shutil.copyfileobj(fsrc, fdst[, length])(copyfileobj方法只会拷贝文件内容)将文件内容拷贝 ...

  7. swagger.net 使用nginx 代理时出现端口号导致出错

    1:当我们通过nginx代理访问时,由于nginx配置了映射到的一个站点为端口为127.0.0.1:6201,导致访问swagger接口时出现增加端口号,如下截图,这样就导致整个swagger无法使用 ...

  8. maven中运行java程序

    从命令行运行1.运行前先编译代码,exec:java不会自动编译代码,你需要手动执行mvn compile来完成编译.mvn compile2.编译完成后,执行exec运行main方法. 不需要传递参 ...

  9. pip包导出

    用pip对已有的环境做导出准备 1. 使用pip导出当前环境所有依赖包信息文件 pip freeze > requirements.txt 2. 下载所有依赖包到本地 pip install - ...

  10. 激活windows专业版(激活windows10专业版，解决“我们无法在此设备上激活windows因为无法连接到你的组织的激活服务器 ”)

    本来系统用的好好的,但是前几天系统突然提示我要去取设置里面激活windows,我就想:我的系统好像是原厂正版的吧,怎么就过期了呢?没办法只能搜索下怎么激活,去系统城,各大网站什么的试了好多密钥全部不行 ...