SpringBoot服务器端解决跨域问题

本文导航

SpringBoot解决跨域问题的两种方案：

1、通过给方法或者类加注解的形式，@CrossOrigin。

2、继承接口，重写addCorsMappings方法。

第一种方式：

@RestController
@CrossOrigin("http://localhost:8081")
public class BaseController {

 @GetMapping("/hello")
 public String testGet(){

  return "get";
 }

 @PutMapping("/doPut")
 public String testPut(){
  return "put";
 }
}

指定请求来源，可以写成“*”，表示接收所有来源的请求。

第二种方式：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

 @Override
 public void addCorsMappings(CorsRegistry registry) {
  registry.addMapping("/**").allowedOrigins("http://localhost:8081")
    .allowedHeaders("*")
    .allowedMethods("*")
    .maxAge(30*1000);
 }
}

allowOrigins也可以写成allowedOrigins(" * ")，表示接收所有来源的请求。

注意点：

1、路径来源的写法问题

如果后台指定路径来源为：http://localhost:8081

那么在浏览器里访问前端页面的时候，必须用 http://localhost:8081，不可以写成127.0.0.1或者本机ip地址。否则还是会报跨域错误。测试如下

后台设置：

 @Override
 public void addCorsMappings(CorsRegistry registry) {
  registry.addMapping("/**").allowedOrigins("http://localhost:8081")
    .allowedHeaders("*")
    .allowedMethods("*")
    .maxAge(30*1000);
 }

前端请求：

<script>
    doGet = function () {
        $.get('http://localhost:8080/hello', function (msg) {
            $("#app").html(msg);
        });
    }
 
    doPut = function () {
        $.ajax({
            type:'put',
            url:'http://localhost:8080/doPut',
            success:function (msg) {
                $("#app").html(msg);
            }
        })
    }
</script>

启动服务，浏览器里访问：

http://localhost:8081/index.html

正常返回结果

浏览器里访问：

http://127.0.0.1:8081/index.html

报跨域错误如下：

所以说，浏览器访问路径需要与后台allowOrigin里设置的参数一致。

那如果代码里的访问路径可以不一样吗，比如：

 doGet = function () {
  $.get('http://127.0.0.1:8080/hello', function (msg) { //本机ip地址
   $("#app").html(msg);
  });
 }

 doPut = function () {
  $.ajax({
   type:'put',
   url:'http://192.168.1.26:8080/doPut',
   success:function (msg) {
    $("#app").html(msg);
   }
  })
 }

经过测试，是可以的，只要浏览器里访问页面的路径写法与后台保持一致就可以了。

2、携带Cookie

有时候，前端调用后端接口的时候，必须要携带cookie（比如后端用session认证），这个时候，就不能简单的使用allowOrigins("*")了，必须要指定具体的ip地址，否则也会报错。

以上就是SpringBoot服务器端解决跨域问题的详细内容，更多关于SpringBoot 解决跨域的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • SpringBoot使用Jwt处理跨域认证问题的教程详解

    在前后端开发时为什么需要用户认证呢?原因是由于HTTP协定是不存储状态的,这意味着当我们透过账号密码验证一个使用者时,当下一个request请求时他就把刚刚的资料忘记了.于是我们的程序就不知道谁是谁了. 所以为了保证系统的安全,就需要验证用户是否处于登陆状态. 一.JWT的组成 JWT由Header.Payload.Signature三部分组成,分别用.分隔. 下面就是一个jwt真实的样子,说白了就是一个字符串,但是里面却存储了很重要的信息. eyJhbGciOiJIUzI1NiJ9.eyJzd

  • SpringBoot框架RESTful接口设置跨域允许

    跨域 跨域请求是指浏览器脚本文件在发送请求时,脚本所在的服务器和请求的服务器地址不一样.跨域是有浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制, 同源策略:是指协议.域名.端口都要相同,其中有一个不同都会产生跨域 SpringBoot框架RESTful接口解决跨域 此处是有配置文件的方式来解决的 package com.prereadweb.config.cors; import org.springframework.context.annotation.Bean; im

  • 解决Vue调用springboot接口403跨域问题

    最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的. 注意:"@CrossOrigin"注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本 1. 在controller层上添加@Configuration注解, 如果没有效果请制定RequestMapping总的method类型

  • Springboot前后端分离项目配置跨域实现过程解析

    项目登录流程如下 用户进入前端登录界面,输入账号密码等,输入完成之后前端发送请求到后端(拦截器不会拦截登录请求),后端验证账号密码等成功之后生成Token并存储到数据库,数据库中包含该Token过期时间,然后返回生成的Token到前端. 前端收到Token,表示登录成功,把这个Token存储本地.然后跳转到用户中心页面,用户中心页面在ajax的请求头中带上Token,跟随请求用户数据接口一起带到后端. 后端通过拦截器拦截到这个请求,去判断这个Token是否有效,有效就放过去做他该做的事情,无效就

  • Springboot跨域问题三种解决方案

    使用vue+axios+spring boot前后端分离项目时会出现跨域问题 解决方式: 一: 全局配置 /** * 就是注册的过程,注册Cors协议的内容. * 如: Cors协议支持哪些请求URL,支持哪些请求类型,请求时处理的超时时长是什么等. */ @Override public void addCorsMappings(CorsRegistry registry) { registry .addMapping("/**")// 所有的当前站点的请求地址,都支持跨域访问. .

  • SpringBoot跨域Access-Control-Allow-Origin实现解析

    这篇文章主要介绍了SpringBoot跨域Access-Control-Allow-Origin实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 跨域(CORS)是指不同域名之间相互访问. 跨域,指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略所造成的,是浏览器对于JavaScript所定义的安全限制策略. 只要协议,子域名,主域名,端口号有一项不同,就属于跨域 跨域的解决方法 前端: 使用jsonp 后端: 实现WebMvcC

  • 详解springboot和vue前后端分离开发跨域登陆问题

    前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,

  • SpringBoot+Vue前后端分离实现请求api跨域问题

    前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

  • springboot+angular4前后端分离 跨域问题解决详解

    springboot+angular4前后端分离 跨域问题解决详解

    springboot中新增一个过滤器如下: package com.rtpksps.kss.config; import org.springframework.stereotype.Component; import javax.servlet.*; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * @author Administrator * @title: OriginFilt

  • SpringBoot实现jsonp跨域通信的方法示例

    实现jsonp跨域通信 实现基于jsonp的跨域通信方案 原理 浏览器对非同源ajax请求有限制,不允许发送跨域请求 目前跨域解决方案有两种 cros配置 jsonp请求 cros为新规范,通过一个head请求询问服务器是否允许跨域,若不允许则被拦截 jsonp则为利用浏览器不限制js脚本的同源性,通过动态创建script请求,服务器传递回一个js函数调用语法,浏览器端按照js函数正常调用回调函数 实现思路 首先确定服务器端应该如何返回数据 一次正确的jsonp请求,服务器端应该返回如下格式数据

随机推荐