前后端分离开发中，跨域问题是很常见的一种问题。本文主要是解决 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. c++17 代码你能看懂吗?

    ------------------------------------------------------------------------------ #include <vector&g ...

  2. ngx_string()错误分析

    #define ngx_string(str) { sizeof(str) - 1, (u_char) str } typedef struct { uint len; u_char* data; } ...

  3. Android应用市场的帮助类

    写了一个Android应用市场的帮助类,如下: public class MarketUtils { public static final String MARKET_DATA = "ma ...

  4. LeetCode 9. Palindrome Number（c语言版）

    题目: Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same ...

  5. vscode 同步配置插件

    目前所用: 1.25.1版本 1,删除 vscode 客户端, 卸载vscode应用软件删除不了用户配置信息,,下载安装还会发现之前下载的插件和个人配置信息都还会重新加载出来 应先彻底清除已安装的插件 ...

  6. C#获取指定的文件是否是内部特殊版本的代码

    把内容过程经常用到的内容片段珍藏起来,下面的内容内容是关于C#获取指定的文件是否是内部特殊版本的内容,希望对各朋友有所用处. using System;using System.Diagnostics ...

  7. SecuerCRT遇到一个致命错误且必须关闭_解决方案_软件链接(自己百度云盘的)

    问题描述: 1.以前安装过SecureCRT,现在出现问题,手工卸载不完全,导致新安装的SecureCRT一直提示:以下错误. 2.出现的错误: 3.解决方案: 1)删除,上图路径中VanDyke文件 ...

  8. CISPA Scyther tools

    1.Scyther软件作者网站的整理 Scyther工具的网站主页:https://people.cispa.io/cas.cremers/index.html 首先 对Scyther软件的资料进行整 ...

  9. bzoj 2599

    还是点对之间的问题,果断上点分治 同样,把一条路径拆分成经过根节点的两条路径,对不经过根节点的路径递归处理 然后,我们逐个枚举根节点的子树,计算出子树中某一点到根节点的距离,然后在之前已经处理过的点中 ...

  10. IE下get方式传中文参数乱码解决方法

    乱码原因:浏览器在传递url的时候,会使用自己的编码格式对地址进行编码,如果浏览器所使用编码与服务器采用编码不一致,服务器接收到的参数就会出现乱码.在firefox,chrome下正常,ie下会出现乱 ...