【SpringCloud】02——前后分离跨域问题解决

1.什么是跨域？
域名，协议，端口不一致进行访问，就会出现跨域，
今天前端访问后台时候出现如下问题： No ‘Access-Control-Allow-Origin’ 403 网络错误

问题原因：
跨域访问违反了同源策略，同源策略规定：发送请求url的协议、域名、端口三者之间任意一与当前页面地址必须相同即为跨域，同一个服务内部访问不会出现跨域问题，因为启动的是同一个端口。

2.跨域的几种方式
在这里插入图片描述
3.如何解决跨域问题
3.1在被调用的类或方法上增加@CrossOrigin注解来声明自己支持跨域访问

@RequestMapping(value="/getResInfo",method = {RequestMethod.POST})
@CrossOrigin(allowCredentials="true", allowedHeaders="*", methods={RequestMethod.POST}, origins="*")
    
public List<Map<String,Object>> getResInfo(@RequestParam(name = "resTypeId", required = false) String resTypeId){
。。。
}

如果只是针对某个服务需要被跨域访问，用此方案可行。。
但由于我们进行了前后端分离，前台调用的都是跨域的服务，此方案需要对几乎所有的B、C应用的服务对应的方法或者类上增加注解，不太合适。
而且，如果B、C服务都开放了跨域访问，则可能存在安全隐患，因为其他未知应用也可以访问这些服务。。

3.2 在每个服务内建配置文件CorsConfig类

package com.dmsdbj.integral.kernel.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;

@Configuration
public class CorsConfig {

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;                                                                
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

3.3在网管zuul里增加CorsFilter过滤器，这样只需要配置一处就可以

@SpringBootApplication
@EnableZuulProxy
public class DemoZuulApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoZuulApplication.class, args);
    }
    
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); // 允许cookies跨域
        config.addAllowedOrigin("*");// 允许向该服务器提交请求的URI，*表示全部允许。。这里尽量限制来源域，比如http://xxxx:8080 ,以降低安全风险。。
        config.addAllowedHeader("*");// 允许访问的头信息,*表示全部
        config.setMaxAge(18000L);// 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了
        config.addAllowedMethod("*");// 允许提交请求的方法，*表示全部允许，也可以单独设置GET、PUT等
    /*    config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");// 允许Get的请求方法
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");*/
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

添加了zuu网关，所有的服务都通过网关进行访问，否则失败，更安全。

【SpringCloud】02——前后分离跨域问题解决

猜你喜欢