什么是跨域，为什么会发生跨域，怎么解决？

时间：2024-10-24 15:33:39

什么是跨域？

跨域（Cross-Origin）是指浏览器出于安全考虑，阻止网页从一个域（域名、协议、端口）请求另一个域的数据。这种限制被称为“同源策略”，即只有协议、域名和端口号完全相同的请求才被允许。这种机制旨在防止恶意网站对用户的敏感数据进行不正当的访问。

注意，这里说的是网站与后台，但是我们可以通过和前端一致，然后让前端作为代理去跟后端沟通，这也就避免了网页和前后端的端口协议不同而导致的跨域问题了。

为什么会发生跨域？

跨域问题主要在以下情况下发生：

前端和后端运行在不同的域上。
例如，前端的 Vue3 应用运行在 http://localhost:5173，而后端的 Spring Boot 应用运行在 http://localhost:8080。由于端口号不同，两个地址被视为不同的域。
协议不同。
例如，前端使用 http，后端使用 https，这也是跨域。
不同的二级域名。例如，前端为 http://app.example.com，而后端为 http://api.example.com。

怎么解决跨域问题（这里以springboot和vue为例讲两个最常用的方式）

1. 在后端配置 CORS（跨域资源共享）

CORS（Cross-Origin Resource Sharing）是浏览器支持的跨域请求方式，通过配置响应头来允许来自不同源的请求。

在 Spring Boot 中，可以通过添加 CORS 配置来允许跨域请求：

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

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 配置可以被跨域的路径
                .allowedOrigins("http://localhost:5173") // 允许的前端地址
                .allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH") // 允许的方法
                .allowedHeaders("*") // 允许的请求头
                .allowCredentials(true); // 是否允许携带凭证
    }
}

2. 使用代理服务器解决跨域问题

在开发环境中，可以通过配置前端的代理服务器来避免跨域请求的限制。这个方法不需要对后端进行任何修改。

在 Vue3 项目中，可以配置 Vite 的开发服务器代理功能，在 vite.config.js 文件中添加如下代码：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端服务器地址
        changeOrigin: true, // 修改源
        rewrite: (path) => path.replace(/^\/api/, '') // 去掉请求路径中的 '/api' 前缀
      }
    }
  }
});

相关文章