前后端联桥跨域问题:Access to XMLHttpRequest at 'xxx' from 'xxx'

后端SpringBoot 前端Vue

前言

同一域名下，不同端口的请求会被视为跨域请求。
例如，前端运行在 `http://localhost:5173`，后端运行在 `http://localhost:8080`。

报错如下：

Access to XMLHttpRequest at 'http://localhost:8080/admin/employee/login' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方案

在后端创建一个名为： CorsConfig 的文件，代码如下（自己敲的话要特别注意别导错包）：

package com.sky.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 该类用于配置Spring框架的CORS策略，以解决前后端分离时的跨域请求问题。
 * CORS（Cross-Origin Resource Sharing，跨源资源共享）是一种安全机制，
 * 允许或限制Web页面上的脚本能够请求访问从不同源服务器上获得的资源。
 */
@Configuration
public class CorsConfig {

    /**
     * 创建并注册CORS过滤器的Bean。
     * 该方法配置了CORS策略，并注册了一个CORS过滤器Bean到Spring容器中。
     *
     * @return 返回配置好的CORS过滤器。
     */
    @Bean
    public CorsFilter corsFilter() {
        // 创建CORS配置实例
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 允许所有来源
        corsConfiguration.addAllowedOrigin("*");
        // 允许所有请求头
        corsConfiguration.addAllowedHeader("*");
        // 允许所有HTTP方法
        corsConfiguration.addAllowedMethod("*");

        // 创建基于URL的CORS配置源
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 为所有路径注册CORS配置
        source.registerCorsConfiguration("/**", corsConfiguration);

        // 创建并返回CORS过滤器
        return new CorsFilter(source);
    }
}