前后端分离开发中，跨域问题是很常见的一种问题。本文主要是解决 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. Eclipse install new software无反应

    一个问题可以有不同的解决方案 其他人提供了不少方案 我遇到了这个问题 但是这些解决方案都无济于事 于是 我就采取了一个新方案: 然后重新解压,找到里面的eclipse.exe重新打开就可以了 现在有反 ...

  2. ad9361自测试校准

    #include "config.h" #include "CONFIG_FPGA_ALL.h" #include "xparameters.h&qu ...

  3. md5加密 bas64加密

    /** * 获取bas64加密的算法 * @param str * @return */ public static String getBase64(String str) { byte[] b = ...

  4. 论文阅读笔记四十九：ScratchDet: Training Single-Shot Object Detectors from Scratch(CVPR2019)

    论文原址:https://arxiv.org/abs/1810.08425 github:https://github.com/KimSoybean/ScratchDet 摘要 当前较为流行的检测算法 ...

  5. import cv2出现“ImportError: DLL load failed: 找不到指定的模块”

    操作系统:windows server 2008 r2 enterprise 64位 Python版本:3.7.0 64位 这个问题坑了我一天,看了不少博客,用了好多方法,也没用.不多说了,介绍我的方 ...

  6. 网络安装Centos x64 6.10

    1.下载老毛桃PE最新增强版本,然后生成一个可启动U盘. 2.在U盘或移动硬盘中创建一个目录 MYEXT,然后把centos的安装iso放到里面. 3.引导选择从外置ISO进行安装. https:// ...

  7. 理解go的闭包

    package main import ( "fmt" ) func test(a int) { a++ fmt.Println(a) } func test2() func() ...

  8. Codeforces 1070J Streets and Avenues in Berhattan dp

    Streets and Avenues in Berhattan 我们首先能发现在最优情况下最多只有一种颜色会分别在行和列, 因为你把式子写出来是个二次函数, 在两端取极值. 然后我们就枚举哪个颜色会 ...

  9. sql查询单表之中大于2条的数据

    SELECT COUNT(字段)AS COUNT,字段FROM 表名 GROUP BY 字段 HAVING COUNT >=

  10. 结对开发项目--石家庄地铁web版

    一.功能要求 1.数据库设计:将石家庄地铁线路图的各个线路,各个站点,换乘信息等用数据库的形式保存起来,应该保存的信息有 {线路号,线路的各个站名,车站的换乘信息}. 2.站点查询:用户可以输入任一一 ...