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

前端不是我们的强项，所以这里准备好了前端代码，只需要部署起来，就可以前后联调了。

在现阶段，使用 tomcat 方式部署前端代码，后续会用 nginx 来部署

tomcat 部署前端代码

前端代码在练习项目的 front/foodie-shop/ 目录下，复制到 tomcat 的 webapps 目录下，启动后就可以访问到了

http://localhost:8080/foodie-shop/

整个配置在 js/app.js 中，以 window.app={} 方式直接挂载到 window 对象上的。

更换里面的 serverUrl: "http://localhost:8088", 为我们后端服务地址，打开注册页面，就会报错，控制台提示跨域

Access to XMLHttpRequest at 'http://localhost:8088/passport/usernameIsExist?username=admin' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

后端跨域配置

package cn.mrcode.foodiedev.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;

/**
 * 跨域配置
 *
 * @author mrcode
 * @date 2021/2/13 16:27
 */
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 设置运行跨域的地址，也可以使用 * 代替允许所有地址
        config.addAllowedOrigin("http://localhost:8080");
        // 是否运行携带 cookie 相关信息
        // 在前端也有的框架可以配置这一样，前端是否允许跨域的时候携带：axios.defaults.withCredentials = true;
        config.setAllowCredentials(true);
        // 允许访问所有的 http 请求方式，如 get、post
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");

        // 为 url 添加映射路径
        // 允许所有路径使用该配置
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);

        return new CorsFilter(source);
    }
}