[代码欣赏]-springboot的跨域操作

2.4 等高版本

/*
 * 项目名称:cdb-api
 * 类名称:CorsConfig.java
 * 包名称:com.gzzbjkj.config
 *
 * 修改履历:
 *      日期                修正者      主要内容
 *      2018/11/21 16:04    gzzbjkj      初版完成
 *
 * Copyright (c) 2019-2019 八借科技
 */
package com.gzzbjkj.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 跨域处理
 *
 * @author gzzbjkj
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {


    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*") // SpringBoot2.4.0 [allowedOriginPatterns]代替[allowedOrigins]
                .allowedMethods("*")
                .maxAge(3600)
                .allowCredentials(true);
    }


}

什么是跨域？

简单说是 源不同；
多说点： 就是 协议 端口 域名必须一致才是同源，否则不同源；

package com.vue.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author: wl
 * @date 2023/5/4
 */
@Configuration
public class CrossOriginConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**") 
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                //设置允许跨域请求的域名
                .allowedOrigins("*")
                // 设置允许的header属性
                .allowedHeaders("*")
                跨域允许时间
                .maxAge(3600)
                是否允许证书
                .allowCredentials(true); 
    }
}

的好处是使得所有的路径都pass，路径使用什么隔离，linux是/，还是点

请求经过的先后顺序问题，请求会先进入到自定义拦截器中，而不是进入Mapping映射中

WebMvcConfigurer

自定义WebMvcConfigurer实现CORS配置–原理分析请点击我

跨域：
跨域问题的根本原因：因为浏览器受到到同源策略的限制，
当前域名的js只能读取同域下的窗口属性。
什么叫做同源策略？就是不同的域名, 不同端口,
不同的协议不允许共享资源的，保障浏览器安全。
同源策略是针对浏览器设置的门槛。
如果绕过浏览就能实现跨域，
所以说早期的跨域都是打着安全路数的擦边球，
都可以认为是 hack 处理。

cros原理

前端解决跨域问题的8种方案请点击我

这是因为浏览器的同源策略（Same Origin Policy）限制了在一个源（协议、域名、端口号）下的 JavaScript 代码不能访问另一个源下的资源。在这个问题中，你的 Vue.js 应用程序在 http://localhost:8090 上运行，试图访问位于 http://127.0.0.1:8002/login 上的资源，两者的源不同，因此触发了 CORS（跨源资源共享）安全机制，浏览器拒绝了请求。

要解决这个问题，你需要在 http://127.0.0.1:8002/login 的响应头中添加一个 Access-Control-Allow-Origin 响应头，指定允许访问该资源的源。你可以在服务器端的响应头中添加以下代码：

// Node.js Express 框架示例
app.use(function (req, res, next) {
res.setHeader(‘Access-Control-Allow-Origin’, ‘http://localhost:8090’);
res.setHeader(‘Access-Control-Allow-Methods’, ‘GET, POST, OPTIONS, PUT, PATCH, DELETE’);
res.setHeader(‘Access-Control-Allow-Headers’, ‘X-Requested-With,content-type’);
res.setHeader(‘Access-Control-Allow-Credentials’, true);
next();

Access-Control-Allow-Origin

Access-Control-Allow-Origin 是一个响应头，用于解决跨域访问的问题。当浏览器向一个跨域的服务器发起请求时，该服务器需要在响应头中添加 Access-Control-Allow-Origin 响应头，来指示哪些源可以访问该资源。

例如，如果 Vue.js 应用程序运行在 http://localhost:8090 上，试图访问位于 http://127.0.0.1:8002/login 上的资源，需要在 http://127.0.0.1:8002/login 的响应头中添加以下代码：

Access-Control-Allow-Origin: http://localhost:8090
这样，浏览器就可以判断该资源是否可以被访问。如果该资源允许访问，则浏览器会将响应返回给 Vue.js 应用程序，否则会抛出 CORS 错误。除了 Access-Control-Allow-Origin，还有其他一些响应头，如 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等，可以用于设置跨域访问的权限。