前后端分离项目解决跨域问题

1、跨域概念

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是 浏览器对javascript施加的安全限制。

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

2、跨域流程

中文文档说明：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

3、解决跨域（一）使用nginx部署为同一域

4、解决跨域（二）配置当次请求允许跨域

1）、添加响应头

• Access-Control-Allow-Origin：支持哪些来源的请求跨域
• Access-Control-Allow-Methods：支持哪些方法跨域
• Access-Control-Allow-Credentials：跨域请求默认不包含cookie，设置为true可以包含 cookie
• Access-Control-Expose-Headers：跨域请求暴露的字段
  • CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段： Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
• Access-Control-Max-Age：表明该响应的有效时间为多少秒。在有效时间内，浏览器无 须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果 该首部字段的值超过了最大有效时间，将不会生效。

5、代码实现

在gateway网关模块进行配置

package com.kuang.gulimall.gateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsConfigurationSource;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;

@Configuration
public class GulimallCorsConfiguration {
    
    

    @Bean
    public CorsWebFilter corsWebFilter(){
    
    
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //允许那些头可以跨域
        corsConfiguration.addAllowedHeader("*");
        //允许那些方式可以跨域
        corsConfiguration.addAllowedMethod("*");
        //允许那个请求来源
        corsConfiguration.addAllowedOrigin("*");
        //是否允许携带cookie进行跨域
        corsConfiguration.setAllowCredentials(true);

        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);
    }
}

---

如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发。
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客