前后端跨域问题的解决方案

一、什么是跨域

跨域，全称为“跨域资源共享”（Cross-Origin Resource Sharing，简称CORS），是指浏览器的一种安全策略，用于限制从一个源（origin）的文档或脚本如何与另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

简单来说，如果你的网页尝试请求另一个域（即协议、域名或端口任一不同）的资源时，就构成了跨域请求。默认情况下，出于安全原因，浏览器会阻止跨域HTTP请求。

例如，如果你的网页是在http://www.example.com上，而你尝试通过AJAX请求http://www.anotherdomain.com/data的数据，这就构成了跨域请求，浏览器默认会阻止这种请求。

要允许跨域请求，服务器端需要设置特定的HTTP响应头，告诉浏览器允许这个web应用访问所选接受跨域请求的资源。最常用的方法是设置Access-Control-Allow-Origin头部，例如，将其设置为*表示接受任何域的请求，或者指定具体的域名以限制哪些域可以访问资源。

大白话：前端的访问路径(协议、域名、端口)要是和请求后端数据的接口的（协议、域名、端口）不一致就会造成跨域，以下是两种解决方案，一种在前端进行配置，一种在后端进行配置

二、前端跨域方案

注意：前端针对vue3中vite.config.ts文件的代理跨域

1.Axios的封装文件

对于axios一般会进行封装处理，这里配置的后端请求路径就是/api,用该路径代理后端真实的请求路径

2.Vite.config.ts文件的配置

打开vite的官网是有该问题的解决方案的

我们将所需的代码复制到自己的vite文件中

这里的后端请求路径是http://localhost:8888,这是笔者本地开启的后端服务

3.测试文件

4.结果

在浏览器控制台就打印出了结果，如果有些接口不需要配置代理跨域那就是在后端已经进行过了相应的配置

三、后端跨域解决

针对springboot后端项目配置的跨域解决方案

自定义一个配置类

//解决跨域
@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**") // 允许所有路径的跨域请求
            .allowedOrigins("http://localhost:5555") // 允许来自http://localhost:5555的请求
            .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的方法
            .allowedHeaders("*") // 允许的请求头
            .allowCredentials(true) // 允许携带凭证（cookies, HTTP认证及客户端SSL证明等）
            .maxAge(3600); // 预检请求的缓存时间（秒）
}

注意：allowedOrigins方法中的路径就是前端项目打开的路径，要根据自己的打开路径进行配置