Java架构师—设置跨域配置实现前后端联调

前言

       使用tomcat运行前端源码；设置跨域配置实现前后端联调。

---

---

一、使用tomcat运行前端源码

1.1 官网下载tomcat

       tomcat官网：https://tomcat.apache.org
       在官网下载自己需要的版本，zip用于Windows系统，tar用于Linux系统。

1.2 部署前端

       将前端源码放在webapps目录下。

1.3 启动服务器

       进入tomcat的bin目录下，运行startup.bat，即可启动tomcat。

       启动成功后的页面如下：

       启动后，就可以访问前端项目了。在浏览器输入：http://localhost:8080/前端项目名 即可正常访问。

1.4 关闭服务器

       关闭服务器，同样进入tomcat的bin目录，运行shutdown.bat，即可关闭tomcat。

二、设置跨域配置实现前后端联调

       前端部署完成，启动服务器后，访问后台，F12在控制台，我们会发现如下错误：
Access to XMLHttpRequest at ‘http://localhost:8088/passport/usernameIsExist?username=cj’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

       需要进行设置跨域配置实现前后端联调：

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 {

    public CorsConfig() {
    }

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

        // 设置是否发送cookie信息   前端设置axios.defaults.withCredentials = true;前后端才能共享cookie
        config.setAllowCredentials(true);

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

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

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

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

}

总结

使用tomcat运行前端源码；设置跨域配置实现前后端联调。