跨域问题解释及前后端解决方案（SpringBoot）

一、问题引出

有时,控制台出现如下问题。

二、为什么会有跨域

2.1浏览器同源策略

浏览器的同源策略 （ Same-origin policy ）是一种重要的安全机制，用于限制一个源（ origin ）的文档或

脚本如何与另一个源的资源进行交互。这个策略防止了恶意网站读取其他站点上的敏感数据。

例如：被钓鱼网站收集信息，使用 AJAX 发起恶意请求，传递转账信息给银行服务器

作用： 保护浏览器中网站的安全，限制 AJAX 只能向同源 URL 发起请求

源： Web 网页内容的源由用于访问它的 URL 的方案（协议）、 主机名 （域名）和端口三部分组成。只

有当协议、主机和端口都匹配时，两个对象才具有相同的源。

同源： 网页加载时所在源，和 AJAX 请求时的源（协议，域名，端口号）全部相同即为同源。

三、什么是跨域

跨域： 从 一个源 的文档 / 脚本，加载 另一个源 的资源就产生了跨域。

例如：网页所在源和 AJAX 访问的源（协议，域名，端口）有一个不同，就发生了跨域访问，请求响应

是失败的。

四、后端解决方案

4.1方案一：局部配置

CORS （后端） 采用 CORS （跨域资源共享），一种基于 HTTP 头的机制 ，该机制通过允许服务器标示除了它自己

以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。

后端：设置 Access-Control-Allow-Origin 响应头字段，允许除了它自己以外的源来访问自己

的资源

前端：正常发起 AJAX 请求，无需额外操作

直接在控制器或者特定的方法上使用 @CrossOrigin 注解来为单个 API 接口添加 CORS 支持

4.2、方案二：全局配置

新增 config 包，在 config 包下新建 CorsConfig 配置类

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    /**
    * 跨域处理
    *
    * @param registry
    */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 所有接口
         registry.addMapping("/**")
                // 所有源
                .allowedOrigins("*")
                // .allowedOrigins("http://localhost:3000")
                // 允许的方法
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                // 允许的请求头
                .allowedHeaders("*");
                // 是否允许携带 Cookie 等凭证信息
                // .allowCredentials(true);
    }
}

注意：如果同时设置了 allowedOrigins(“*”) 并开启了 allowCredentials(true) ，这是不安

全的做法，因为这允许任何来源携带凭证访问 API 。浏览器出于安全考虑，可能会拒绝这种设置。

五、前端解决方案

在开发环境中， 可以使用 vue-cli 内置的 代理功能 来解决跨域问题。在项目的 vue.config.js 文件

中添加如下配置：

// 开发环境代理配置
proxy: {
    '/api': {
        // 后端访问基础路径
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
        '^/api': ''
        }
    }
}