解决跨域报错问题的笔记

• 一、问题描述
• 二、如何解决
• • 1.添加@CrossOrigin注解
  • 2.添加CorsConfiguration过滤器
  • 3.实现WebMvcConfigurer接口，重写addCorsMappings方法

    一、问题描述

    我们在完成前后端分离项目时（Vue+SpringBoot），有很多人会遇到跨域问题（CORS）。

    

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

    同源策略： 是指协议，域名，端口都要相同，其中有一个不同都会产生跨域问题（浏览器产生）。

    所谓同源是指，域名，协议，端口 均相同，例如：

    • http://www.8080.com/index.html调用 http://www.8080.com/server.PHP

      （非跨域）；

    • http://www.8080.com/index.html调用 http://www.8181.com/server.php

      （主域名不同:8080/8181，跨域）

    • http://a.8080.com/index.html调用http://b.8080.com/server.php（子域名不同:a/b，跨域）；
    • http://www.6.com:8080/in.html调用http://www.6.com:8081/se.php（端口不同:8080/8081，跨域）
    • http://www.80.com/index.html调用https://www.80.com/server.php（协议不同:http/https，跨域）

      请注意： localhost和127.0.0.1虽然都指向本机，但也属于跨域。

      浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

      二、如何解决

      1.添加@CrossOrigin注解

      在目标方法上添加@CrossOrigin注解，适用于方法少。

      @CrossOrigin注解中有2个参数填写项，分别是：

      • origins ： 允许可访问的域列表
      • maxAge：准备响应前的缓存持续的最大时间（以秒为单位）

        spring注解@CrossOrigin不起作用的原因：

        1. 是springMVC的版本要在4.2或以上版本才支持@CrossOrigin
        2. 在Controller注解上方添加@CrossOrigin注解后，仍然出现跨域问题，解决方案之一就是：在@RequestMapping注解中没有指定Get、Post方式，具体指定后，问题解决。

        2.添加CorsConfiguration过滤器

        当我们项目中有很多方法时，一个个添加注解就不适用了。

        这时，我们要添加一个过滤器：

        @Configuration
        public class CorsConfig {
        	@Bean
        	public CorsFilter corsFilter(){
        		//创建过滤器对象（springframework提供）
        		CorsConfiguration corsConfiguration = new CorsConfiguration();
        		corsConfiguration.addAllowedOrigin("*"); //允许不同源
        		corsConfiguration.addAlLowedHeader("*"); //允许不同的http/https
        		corsConfiguration.addAlLowedMethod("*"); //允许不同的请求头put,post...
        		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(source.registerCorsConfiguration( pattern:"/**"，corsConfiguration);
        		return new CorsFilter(source);
        	}
        }
        

        3.实现WebMvcConfigurer接口，重写addCorsMappings方法

        @Configuration
        public class CorsConfiguration implements WebMvcConfigurer {
        	@override
        	public void addCorsMappings(CorsRegistry registry){
        		registry.addMapping("/**")
        				.allowedoriginPatterns("*")
        		//允许不同的请求头		
        .allowedMethods("GET", "posT", "PuT","DELETE","HEAD","OPTIONS")
        				.a1lowCredentials(true)
        				.maxAge(3600) //3600s内不再询问
        				.alTowedHeaders("*");
        		}
        }
        

        希望这些可以帮到你，也可以帮到我，防止我忘记哈哈！