跨域以及后端如何解决跨域

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 • 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

比如在登录中就会先发送有预检请求

简单请求某些请求不会触发 CORS 预检请求。本文称这样的请求为“简单请求”，请注意，该术语并不属于 Fetch（其中定义了 CORS）规范。若请求 满足所有下述条件，则该请求可视为“简单请求”：使用下列方法之一： GET，HEAD，POST 除了被用户代理自动设置的首部字段（例如 Connection，User-Agent）和在 Fetch 规范中定义为 禁用首部名称 的其他首部，允许人为设置的字段为 Fetch 规范定义的 对 CORS 安全的首部字段集合。该集合为： AcceptAccept-LanguageContent-LanguageContent-Type（需要注意额外的限制） Content-Type 的值仅限于下列三者之一： text/plainmultipart/form-dataapplication/x-www-form-urlencoded 请求中的任意 XMLHttpRequest 对象均没有注册任何事件监听器；XMLHttpRequest 对象可以使用 XMLHttpRequest.upload 属性访问。 请求中没有使用 ReadableStream 对象。 何为简单请求何位非简单请求具体可以查看https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

解决：在微服务项目中可以在网关中添加一个CorsWebFilter

@Configuration
public class CorsConfig {
          
   

    /**
     * 配置跨域
     * 每个需要跨域的请求都添上某些字段很麻烦所有写一个filter
     * 解决跨域问题，通过filter给响应添加某些响应头
     * reactive包下的
     * @return
     */
    @Bean
    public CorsWebFilter corsWebFilter(){
          
   
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");//支持那些源的请求跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");//支持那些方式跨域 post put delete等
        corsConfiguration.setAllowCredentials(true);//包含cookie
        corsConfiguration.setMaxAge(6000000L);//表明该响应的有效时间为多少秒。在有效时间内，浏览器无 须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果 该首部字段的值超过了最大有效时间，将不会生效。
        source.registerCorsConfiguration("/**",corsConfiguration);//任意路径都进行跨域配置
        return new CorsWebFilter(source);
    }
}