前后端跨域问题

跨域是什么

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

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

触发跨域条件

详情可以查看这个网址

跨源资源共享（CORS）

简单请求

某些请求不会触发 CORS 预检请求。在废弃的 CORS 规范中称这样的请求为简单请求，但是目前的 Fetch 规范（CORS 的现行定义规范）中不再使用这个词语。

其动机是，HTML 4.0 中的 <form> 元素（早于跨站 XMLHttpRequest 和 fetch）可以向任何来源提交简单请求，所以任何编写服务器的人一定已经在保护跨站请求伪造攻击（CSRF）。在这个假设下，服务器不必选择加入（通过响应预检请求）来接收任何看起来像表单提交的请求，因为 CSRF 的威胁并不比表单提交的威胁差。然而，服务器仍然必须提供 Access-Control-Allow-Origin 的选择，以便与脚本共享响应。

若请求满足所有下述条件，则该请求可视为简单请求：

• 使用下列方法之一：

  • GET
  • HEAD
  • POST

• 除了被用户代理自动设置的标头字段（例如 Connection、User-Agent 或其他在 Fetch 规范中定义为禁用标头名称的标头），允许人为设置的字段为 Fetch 规范定义的对 CORS 安全的标头字段集合。该集合为：

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type（需要注意额外的限制）
  • Range（只允许简单的范围标头值 如 bytes=256- 或 bytes=127-255）

• Content-Type 标头所指定的媒体类型的值仅限于下列三者之一：

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

• 如果请求是使用 XMLHttpRequest 对象发出的，在返回的 XMLHttpRequest.upload 对象属性上没有注册任何事件监听器；也就是说，给定一个 XMLHttpRequest 实例 xhr，没有调用 xhr.upload.addEventListener()，以监听该上传请求。

• 请求中没有使用 ReadableStream 对象。

预检请求

与简单请求不同，“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

所有非简单请求，比如delete put等，都要在请求前加上一个预检请求，来检验跨域。

若允许跨域，才会发送真正的请求。

解决跨域

1 都部署在一个服务器里面，由服务器转发请求

2 配置当次请求允许跨域

添加响应头

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：表明该响应的有效时间为多少秒。在有效时间内，浏览器无 须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果 该首部字段的值超过了最大有效时间，将不会生效。

那这个我们就可以在后端网关处配置跨域

代码实现

@Configuration
public class GulimallCorsConfiguration {

    /*
    * 跨域配置
    * 1、配置CorsWebFilter
    * 2、配置CorsConfiguration
    * 3、添加@Bean
    * 4、返回CorsWebFilter
     */
    @Bean
    public CorsWebFilter corsWebFilter(){

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();

        //1、配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);

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