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

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

引用

CSDN

1.

https://blog.csdn.net/skdi_/article/details/144536423

跨域问题一直是Web开发中常见的技术难题，特别是在前后端分离的开发模式下。本文将详细解释跨域问题的产生原因，并提供基于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': ''
        }
    }
}  

同时，修改request.js里的基础访问路径