SpringBoot+Vue解決跨域問題幾種處理方案介紹

更新時間：2025年07月23日 09:31:28 作者：隨意石光

同源策略是一種約定,它是瀏覽器最核心也最基本的安全功能,同源策略會阻止一個域的javascript腳本和另外一個域的內(nèi)容進行交互,所以本文我家里聊聊SpringBoot結(jié)合Vue解決跨域問題幾種處理方案吧

為什么會出現(xiàn)跨域問題？

出于瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。

可以說Web是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實現(xiàn)。同源策略會阻止一個域的javascript腳本和另外一個域的內(nèi)容進行交互。所謂同源（即指在同一個域）就是兩個頁面具有相同的協(xié)議（protocol），主機（host）和端口號（port）。

什么是跨域？

當一個請求url的協(xié)議、域名、端口三者之間任意一個與當前頁面url不同即為跨域。

1 . 兩個相同的源之間瀏覽器默認其是可以相互訪問資源和操作DOM的。

2 .兩個不同的源之間若想要相互訪問資源或者操作DOM，那么會有一套基礎(chǔ)的安全策略的制約。

后臺解決方案

1.方法一：@CrossOrigin

注意：

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

2、非@CrossOrigin沒有解決跨域請求問題，而是不正確的請求導(dǎo)致無法得到預(yù)期的響應(yīng)，導(dǎo)致瀏覽器端提示跨域問題。

3、在Controller注解上方添加@CrossOrigin注解后，仍然出現(xiàn)跨域問題，解決方案之一就是：

在@RequestMapping注解中沒有指定Get、Post方式，具體指定后，問題解決。

其中@CrossOrigin中的2個參數(shù)：

origins ：允許可訪問的域列表

maxAge：準備響應(yīng)前的緩存持續(xù)的最大時間（以秒為單位）。可以配置在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");
        //請求得到結(jié)果的有效期
        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值,表示允許發(fā)送cookie，默認情況下cookie不包含在cores中，設(shè)置為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);
    }
}

注意：配置類文件一定要寫在啟動類所在的包下，否則不生效！?。?！

到此這篇關(guān)于SpringBoot+Vue解決跨域問題幾種處理方案介紹的文章就介紹到這了,更多相關(guān)SpringBoot Vue解決跨域問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: