Spring Boot + Vue 前后端分离项目跨域问题

springboot+vue前后端分离项目跨域问题

错误描述

​ 前端没有配置代理直接向后端服务器发送 post 请求，控制台报了以下错误

配置后端允许跨域

方式一

新建一个配置类，代码如下

package com.itheima.config;

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 CORSConfig implements WebMvcConfigurer {

    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

方式二

在 Spring Boot 启动类上添加重写方法

@Override
public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }

方式三

在需要设置允许跨域请求的表现层接口方法上添加注解

@CrossOrigin(origins = {"http://localhost:7070"}) // 允许跨域

注意：http://localhost:7070 替换为前端项目的地址

注解 @CrossOrigin 也可以放在表现层的类上，表示该类所有请求都允许跨域