SpringBoot+Vue解决跨域问题几种处理方案介绍

 更新时间:2025年07月23日 09:31:28   作者:随意石光  
同源策略是一种约定,它是浏览器最核心也最基本的安全功能,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互,所以本文我家里聊聊SpringBoot结合Vue解决跨域问题几种处理方案吧

为什么会出现跨域问题?

出于浏览器的同源策略限制。 同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。

可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。

什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

1 . 两个相同的源之间浏览器默认其是可以相互访问资源和操作DOM的。

2 .两个不同的源之间 若想要相互访问资源或者操作DOM,那么会有一套基础的安全策略的制约。

后台解决方案

1.方法一:@CrossOrigin

注意:

1、springMVC的版本要在4.2或以上版本才支持@CrossOrigin

2、非@CrossOrigin没有解决跨域请求问题,而是不正确的请求导致无法得到预期的响应,导致浏览器端提示跨域问题。

3、在Controller注解上方添加@CrossOrigin注解后,仍然出现跨域问题,解决方案之一就是:

在@RequestMapping注解中没有指定Get、Post方式,具体指定后,问题解决。

其中@CrossOrigin中的2个参数:

origins : 允许可访问的域列表

maxAge:准备响应前的缓存持续的最大时间(以秒为单位)。可以配置在Controller上 也可以配置在方法上。

2. 方法二: 过滤器

package com.sysg.config;


import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


/**
 * @author 77916
 */

@Component
@Order(1)
@WebFilter(filterName = "CoresFilter", urlPatterns = "/*")
public class CoresFilter implements Filter {
    @Override
    public void destroy() {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        //表示所有的域都可以接受
        response.setHeader("Access-Control-Allow-Origin", "*");
        //允许所有的方法
        response.setHeader("Access-Control-Allow-Methods","POST,GET,DELETE,PUT,OPTIONS");
        //请求得到结果的有效期
        response.setHeader("Access-Control-Max-Age","3600");
        response.setHeader("Access-Control-Allow-Headers","x-requested-with,Content-Type,access-control-allow-origin,version-info");
        //该值是一个boolean值,表示允许发送cookie,默认情况下cookie不包含在cores中,设置为true
        response.setHeader("Access-Control-Allow-Credentials","true");
        filterChain.doFilter(servletRequest,servletResponse);
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }
}

web.xml(写在/webapp/WEB-INF目录下)

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!-- 跨域问题解决 -->
    <filter>
        <filter-name>CoresFilter</filter-name>
        <filter-class>com.sysg.config.CoresFilter</filter-class>
        <init-param>
            <param-name>IsCross</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CoresFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

​​​​​​​</web-app>

3.方法三:配置(SpringBoot)

package com.sysg.config;

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

@Configuration
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedHeaders("*")
                .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")
                .maxAge(3600);
    }
}

注意:配置类文件一定要写在启动类所在的包下,否则不生效!!!!

到此这篇关于SpringBoot+Vue解决跨域问题几种处理方案介绍的文章就介绍到这了,更多相关SpringBoot Vue解决跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Java如何实现一个优秀的散列表

    详解Java如何实现一个优秀的散列表

    这篇文章主要通过简单的示例为大家详细介绍了在Java中如何实现一个优秀的散列表,文中的示例代码讲解详细,具有一定的参考价值,需要的可以了解一下
    2023-07-07
  • IDEA 高版本 PlantUML 插件默认主题修改的详细过程

    IDEA 高版本 PlantUML 插件默认主题修改的详细过程

    PlantUML 是非常不错的使用脚本画图的工具,效率很高,很多人会选择在 IDEA 中安装 PlantUML Integration 插件,这篇文章主要介绍了IDEA 高版本 PlantUML 插件默认主题修改,需要的朋友可以参考下
    2022-09-09
  • JDBC中Statement的Sql注入问题详解

    JDBC中Statement的Sql注入问题详解

    这篇文章主要介绍了JDBC中Statement的Sql注入问题详解,sql注入攻击指的是通过构建特殊的输入作为参数传入web应用程序,而这些输入大都是sql语法里的一些组合,通过执行sql语句进而执行攻击者所要做的操作,需要的朋友可以参考下
    2023-10-10
  • Java爬虫实战抓取一个网站上的全部链接

    Java爬虫实战抓取一个网站上的全部链接

    这篇文章主要介绍了JAVA使用爬虫抓取网站网页内容的方法,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧。
    2016-10-10
  • springboot中swagger快速启动流程

    springboot中swagger快速启动流程

    这篇文章主要介绍了springboot中的swagger快速启动流程,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 关于Java项目读取resources资源文件路径的那点事

    关于Java项目读取resources资源文件路径的那点事

    这篇文章主要介绍了关于Java项目读取resources资源文件路径的那点事,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 解析Java格式字符串的使用

    解析Java格式字符串的使用

    本文通过实例给大家介绍了java格式字符串的使用,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-02-02
  • Java编程技巧:if-else优化实践总结归纳

    Java编程技巧:if-else优化实践总结归纳

    这篇文章主要介绍了Java中避免过多if-else的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2021-06-06
  • Hadoop 中 HBase Shell命令的详解

    Hadoop 中 HBase Shell命令的详解

    这篇文章主要介绍了Hadoop 中 HBase Shell命令的详解的相关资料,需要的朋友可以参考下
    2017-10-10
  • Feign使用@PathVariable方式

    Feign使用@PathVariable方式

    Feign使用@PathVariable注解在URL中插入变量,类似于SpringMVC的用法,通过示例展示了如何使用该注解,并在实际调用中替换占位符
    2024-11-11

最新评论