解决前后端分离导致的跨域

清疚 2022-02-13 23:59 269阅读 0赞

###  方式一： ###

Nginx的主配置文件nginx.conf：

server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   /usr/local/lucifer/dist;
                index  index.html index.htm;
    
                charset utf-8;          #显示中文
                add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
                add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
    
            }                                     
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }

实现跨域部分内容：

add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
                add_header 'Access-Control-Allow-Headers' 'Content-Type,*';

### 方式二： ###

### （1）编写Java配置类，使用cors实现跨域 ###

@Configuration
    public class CorsConfig {
        @Bean
        public CorsFilter corsFilter() {
            //1.添加CORS配置信息
            CorsConfiguration config = new CorsConfiguration();
            //1) 允许的域,不要写*，否则cookie就无法使用了
            config.addAllowedOrigin("*");
            //2) 是否发送Cookie信息
            config.setAllowCredentials(true);
            //3) 允许的请求方式
            config.addAllowedMethod("*");
            config.addAllowedHeader("*");
    
            //2.添加映射路径，我们拦截一切请求
            UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
            configSource.registerCorsConfiguration("/**", config);
    
            //3.返回新的CorsFilter.
            return new CorsFilter(configSource);
        }

最终效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDk1Nzg2_size_16_color_FFFFFF_t_70][]

### （2）同样是写Java配置类，不过写法稍有不同 ###

@Configuration
    @EnableWebMvc
    public class CorsConfig implements WebMvcConfigurer {
        
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            //设置允许跨域的路径
            registry.addMapping("/**")
                    //设置允许跨域请求的域名
                    .allowedOrigins("*")
                    //这里：是否允许证书 不再默认开启
                    .allowCredentials(true)
                    //设置允许的方法
                    .allowedMethods("*")
                    //跨域允许时间
                    .maxAge(3600);
        }
    
       
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDk1Nzg2_size_16_color_FFFFFF_t_70]: /images/20220214/efa34faa32764763b005d710cc3cfe73.png