SpringBoot前后端分离项目跨域配置实现前后端联调

最新推荐文章于 2024-08-27 16:21:46 发布

原创最新推荐文章于 2024-08-27 16:21:46 发布 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

Spring全家桶专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个典型的前后端分离项目中如何解决跨域问题。前端通过配置后端项目的IP和端口，并借助Spring Boot的配置类CorsConfig来实现跨域访问。详细步骤包括设置前端代码路径、编写跨域配置类、启动Spring Boot项目等。

前后端分离项目，前端项目启动访问后端项目，此时前后端使用的ip端口号不同，若联调需要跨域配置

本地实现：

前端ip：http://localhost:8080

后端ip: http://localhost:8088

1.前端代码先放在tomcat文件夹下的webapps文件下。前端代码中配置好后端项目的ip及端口号

2.在后端springboot项目写配置类CorsConfig

package com.zkx.config;

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

@Configuration
public class CorsConfig {

    public CorsConfig(){

    }

    @Bean
    public CorsFilter corsFilter(){
        //1.添加cors配置信息
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://localhost:8080");

        // 设置是否发生cookie信息
        config.setAllowCredentials(true);

        //设置允许请求的方式
        config.addAllowedMethod("*");

        //设置允许的header
        config.addAllowedHeader("*");

        //2.为url添加映射路径
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        corsSource.registerCorsConfiguration("/**",config);

        //3.返回重新定义好的corsSource
        return new CorsFilter(corsSource);
    }
}

3.启动springboot项目

4.启动tomcat，在网页上访问前端ip测试