快速简洁解决前后端端口不一致导致的跨域问题

目录

1.跨域问题

2.解决方法

1.springboot项目中添加配置文件

2.后端Controller在类上面添加注解

---

1.跨域问题

简单来讲，跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(baidu.com)页面去请求我的博客(blog.pangao.vip)的资源。但由于有同源策略的关系，一般是不允许这么直接访问的。

此处解决方案，主要针对个人在开发一个Springboot+Vue的前后端分离系统时，设置的前后端端口不一致导致前端页面报错，出现跨域问题的情况

比如，当开发创建项目时，设置前端端口为8080，后端端口为9090，此时，在进行前后端数据传输时会出现跨域问题，产生如下报错。

2.解决方法

1.springboot项目中添加配置文件

在Springboot项目里添加一个配置文件，在com.example.springboot下创建CorsConfig.java，位置如下图所示 

CorConfig.java中配置如下代码，重启后即可实现跨域访问，前端无需再配置跨域

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;

@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

2.后端Controller在类上面添加注解

后端Controller在类上面添加注解@CrossOrigin(origins = "*",maxAge = 3600)

@CrossOrigin(origins = "*",maxAge = 3600) //允许前后端跨域，响应前的缓存持续1小时
public class BankInfoController {
  // Your methods...
}