spring boot配合前端实现跨域请求访问

一.方法:

  1. 服务端设置Respone Header头中Access-Control-Allow-Origin
  2. 配合前台使用jsonp
  3. 继承WebMvcConfigurerAdapter 添加配置类

二.实例:

1.前端:因为我们用了前后端分离,前端用node服务器,node服务器再用了ajax反向代理请求到我的spring boot 服务器。其中node服务器也用了ajax发出请求所以也存在跨域的问题。具体代码:

 app.all(apiRoot + '/*', proxy('127.0.0.1:' + proxyPort, {
  forwardPath: function(req, res) {
   console.log('req: ', req, 'res; ', res);
   return require('url').parse(req.url).path;
  }
 }));

后台(用的是spring boot 1.3.7.RELEASE) :用了一个filter进行了身份验证同时进行了跨域处理,具体代码:

public class AuthFilter implements Filter {
  //  @Autowired
  //这个不能自动注入servlet和filter是被tomcat管理的
  private BaseUserService baseUserService;
  private String[] excludePaths;

  @Override
  public void init(FilterConfig filterConfig) throws ServletException {
    System.out.println("initFilter");
    //不能在初始化中通过Appliaction Context获取因为这时候还没初始化Application Context
    //baseUserService = SpringUtils.getBean("baseUserService", BaseUserService.class);
    excludePaths = new String[]{"/api/user/noLogin", "/api/user/tokenError", "/api/user/loginForeground",
        "/api/user/loginBackground", "/api/user/inCorrectUserId"};
  }

  @Override
  public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
    HttpServletRequest httpServletRequest = (HttpServletRequest) request;
    HttpServletResponse httpServletResponse = (HttpServletResponse) response;
    //这里填写你允许进行跨域的主机ip
    httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
    //允许的访问方法
    httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
    //Access-Control-Max-Age 用于 CORS 相关配置的缓存
    httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
    httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    String userId = request.getParameter("userId");
    String token = request.getParameter("token");
    //有token的                           `
    if (userId != null && token != null) {
      try {
        Integer id = Integer.parseInt(userId);
        if (baseUserService == null)
          baseUserService = SpringUtils.getBean("baseUserService", BaseUserService.class);
        int status = baseUserService.checkLogin(id, token);
        if (status == 1) {
          chain.doFilter(request, response);
        } else if (status == 0) {
          httpServletResponse.sendRedirect("/api/user/tokenError");
        } else if (status == -2) {
          httpServletResponse.sendRedirect("/api/user/inCorrectUserId");
        } else {
          httpServletResponse.sendRedirect("/api/user/noLogin");
        }
      } catch (NumberFormatException exception) {
        httpServletResponse.sendRedirect("/api/user/inCorrectUserId");
      }
    } else {
      String path = httpServletRequest.getServletPath();
      if (excludePath(path)) {
        chain.doFilter(request, response);
      } else {
        httpServletRequest.getRequestDispatcher("/api/user/noLogin").forward(request, response);
      }
    }
//    ((HttpServletResponse) response).addHeader("Access-Control-Allow-Origin", "*");
//    CorsFilter corsFilter=new CorsFilter();

  }

  private boolean excludePath(String path) {
    for (int i = 0; i < excludePaths.length; i++) {
      if (path.equals(excludePaths[i]))
        return true;
    }
    return false;
  }

  @Override
  public void destroy() {
    System.out.println("destroy method");
  }

}

这种方法还适用于servlet中,特别注意的是一定要在filter动作之前加上这句话,也就是在代码的最前面加上这个话。

跨域资源共享 CORS 详解(相关链接)

2.详细请看(点开)
3.具体代码:

package edu.ecnu.yjsy.conf; 

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; 

@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter { 

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
        .allowedOrigins("*")
        .allowCredentials(true)
        .allowedMethods("GET", "POST", "DELETE", "PUT")
        .maxAge(3600);
  } 

}

这里有个坑spring boot 以前的版本这样设置可以用但是 我用的1.3.7.RELEASE spring boot 不能用,所以用第二种方式是万能的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Spring Boot(五)之跨域、自定义查询及分页

    跨域 前面我们初步做出了一个可以实现受保护的 REST API,但是我们没有涉及一个前端领域很重要的问题,那就是跨域请求( cross-origin HTTP request ).先来回顾一些背景知识: 跨域请求 定义:当我们从本身站点请求不同域名或端口的服务所提供的资源时,就会发起跨域请求. 例如最常见的我们很多的 css 样式文件是会链接到某个公共 CDN 服务器上,而不是在本身的服务器上,这其实就是典型的一个跨域请求.但浏览器由于安全原因限制了在脚本( script )中发起的跨域 HTT

  • 详解SpringBoot多跨域请求的支持(JSONP)

    在我们做项目的过程中,有可能会遇到跨域请求,所以需要我们自己组装支持跨域请求的JSONP数据,而在4.1版本以后的SpringMVC中,为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据(SpringBoot接收解析web请求是依赖于SpringMVC实现的).下面我们就看一下怎么用AbstractJsonpResponseBodyAdvice来支持跨域请求. 使用AbstractJsonpResponseBodyAdvice来支持跨域请求

  • Spring Boot Web应用开发 CORS 跨域请求支持

    一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等 CORS与JSONP相比 1. JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求. 2. 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理. 3. JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS 浏览器支持情况 Chrome 3+ Firefox 3.5+ Opera 12+ Sa

  • 浅谈spring-boot 允许接口跨域并实现拦截(CORS)

    本文介绍了spring-boot 允许接口跨域并实现拦截(CORS),分享给大家,也给自己留个笔记 pom.xml(依赖的jar) // 在spring-boot-starter-web的启动器中,已经依赖好了 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependen

  • spring boot ajax跨域的两种方式

    前言 java语言在多数时,会作为一个后端语言,为前端的php,node.js等提供API接口.前端通过ajax请求去调用java的API服务.今天以node.js为例,介绍两种跨域方式:CrossOrigin和反向代理.  一.准备工作 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0&quo

  • Spring Boot实现跨域访问实现代码

    当前使用spring版本是4.3.9 import org.springframework.stereotype.Component; import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Component public class CorsFilter im

  • spring boot配合前端实现跨域请求访问

    一.方法: 服务端设置Respone Header头中Access-Control-Allow-Origin 配合前台使用jsonp 继承WebMvcConfigurerAdapter 添加配置类 二.实例: 1.前端:因为我们用了前后端分离,前端用node服务器,node服务器再用了ajax反向代理请求到我的spring boot 服务器.其中node服务器也用了ajax发出请求所以也存在跨域的问题.具体代码: app.all(apiRoot + '/*', proxy('127.0.0.1:

  • Spring Boot 通过CORS实现跨域问题

    同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由 Netscape 提出的一个著名的安全策略,它是浏览器最核心也最基本的安全功能,现在所有支持 JavaScript 的浏览器都会使用这个策略.所谓同源是指协议.域名以及端口要相同.同源策略是基于安全方面的考虑提出来的,这个策略本身没问题,但是我们在实际开发中,由于各种原因又经常有跨域的需求,传统的跨域方案是 JSONP,JSONP 虽然能解决跨域但是有一个很大

  • springboot 如何解决cross跨域请求的问题

    目录 springboot 解决cross跨域请求 1.使用ajax发送跨域请求接口时 2.在被跨域请求的一方配置 3.再次测试 4.对于只有个别需要开放跨域请求的接口可以这样玩 5.其它解决跨域请求的常用方法 Spring解决cross domain Spring4: Spring3旧版本: springboot 解决cross跨域请求 1.使用ajax发送跨域请求接口时 接口能正常接收到请求并响应,但是无法正常展示响应数据.跨域请求时会在有一个特别的请求头origin(请求来源). 浏览器认

  • SpringBoot开发技巧之如何处理跨域请求CORS

    目录 SpringBoot处理跨域 特殊情况 解决方法 自定义Cors过滤器 通过配置类指定过滤器的优先级 在前后分离的架构下,我们经常会遇到跨域CORS问题,在浏览器上的表现就是出现如下一段错误提示: No 'Access-Control-Allow-Origin' header is present on the requested resource. 下面看一下如何让你的SpringBoot项目支持CORS跨域. SpringBoot处理跨域 在SpringBoot后端处理跨域比较简单,只

  • AJAX跨域请求数据的四种方法(实例讲解)

    由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请

  • Spring Boot设置支持跨域请求过程详解

    现代浏览器出于安全的考虑, HTTP 请求时必须遵守同源策略,否则就是跨域的 HTTP 请求,默认情况下是被禁止的,IP(域名)不同.或者端口不同.协议不同(比如 HTTP.HTTPS)都会造成跨域问题. 一般前端的解决方案有: ① 使用 JSONP 来支持跨域的请求,JSONP 实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的 SRC 不受同源策略约束来跨域获取数据.缺点是需要后端配合输出特定的返回信息. ② 利用反应代理的机制来解决跨域的

  • 详解Spring Boot 2.0.2+Ajax解决跨域请求的问题

    问题描述 后端域名为A.abc.com,前端域名为B.abc.com.浏览器在访问时,会出现跨域访问.浏览器对于javascript的同源策略的限制. HTTP请求时,请求本身会返回200,但是返回结果不会走success,并且会在浏览器console中提示: 已拦截跨源请求:同源策略禁止读取位于 https://www.baidu.com/ 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin'). 解决方案 1.jsonp 2.引用A站的js 3.N

  • Spring Boot和Vue跨域请求问题原理解析

    这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS pol

  • 详解java 中Spring jsonp 跨域请求的实例

    详解java 中Spring jsonp 跨域请求的实例 jsonp介绍 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSO

  • Security框架:如何使用CorsFilter解决前端跨域请求问题

    目录 项目情况 CORS介绍 解决方案 项目情况 最近做的pmdb项目是前后端分离的, 由于测试的时候是前端与后端联调,所以出现了跨域请求的问题. 浏览器默认会向后端发送一个Options方式的请求,根据后端的响应来判断后端支持哪些请求方式,支持才会真正的发送请求. CORS介绍 CORS(Cross-Origin Resource Sharing 跨源资源共享),当一个请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域. 在日常的项目开发时会不可避免的需要进行跨域操作,而在实

随机推荐