前后端分离开发解决跨域

84 阅读2分钟

在java后端的springboot项目中加入这个配置类

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

@Configuration
public class CorsConfig implements WebMvcConfigurer {
 
   @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 覆盖所有请求
        registry.addMapping("/**")
        // 允许发送 Cookie 。 允许发送跨域请求时携带认证信息(例如Cookie)。
        .allowCredentials(true)
        // 允许跨域请求的源,这里使用通配符*表示允许所有的源。
		// 注意,如果需要精确匹配特定的源,可以使用allowedOrigins("http://example.com")。
        // 放行哪些域名(必须用 patterns,否则 * 会和 allowCredentials 冲突)
        .allowedOriginPatterns("*")
        //   允许的跨域请求方法
        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
        /*
        允许的请求头,这里使用通配符*表示允许所有的请求头。
        如果需要更精确地控制允许的请求头,可以列出具体的请求头,
        例如.allowedHeaders("Content-Type", "Authorization")。
        */
        .allowedHeaders("*")
            /*
            : 允许访问的响应头,这里使用通配符*表示允许所有的响应头。
            如果需要更精确地控制响应头,可以列出具体的响应头,例如.exposedHeaders("Authorization")。
            */
        .exposedHeaders("*");
    }
}

为什么会存在跨域问题:

  1. 假如现在你想要登录一个隐私性很高的网站(例如:银行),和钱相关的一般隐私都高。
  2. 登录后,“cookie(当然也有可能是 token)”将存储在你的浏览器中。 这表示告诉服务器你的浏览器现在已登录到帐户)。
  3. 现在,所有未来的请求都将包含此 cookie,并且它可以在知道你已登录的情况下正确响应。
  4. 然后你点开了一个其他的网站
  5. 接下来,该网站会像你的服务器发送了请求。我们知道,由于你的 cookie 已经存在。所以服务端会认为这是你的正常请求
  6. 因此服务器会返回你的银行信息。从而导致你的银行信息盗取。

因此浏览器采用了 SOP(同源策略),它规定了浏览器中所有的服务请求必须要满足三个条件:

  • 同域名
  • 同协议
  • 同端口

如果有一个条件不满足,则会触发 跨域问题,即:请求被阻止。因此上面描述的场景在目前的操作中 不会存在,因此无需担心。