关于前端CORS跨域问题的解决和踩坑注意事项

雪球码虫

已于 2024-08-21 13:07:57 修改

阅读量1.2k

点赞数 23

文章标签：前端

于 2024-07-27 11:58:17 首次发布

本文链接：https://blog.csdn.net/weixin_74771113/article/details/140732475

版权

一、什么是跨域

关于：什么是跨域，这个问题，比如http://www.bilibili.com:8080 这个网址是由协议，主机（www.bilbil.com），端口号组成，必须要同源（也就是访问地址必须完全相同才可以进行访问），这样会非常不方便。

比如一个由公共网站（http://example.com），需要访问（http://api.example.com/books）请求其资源，但是这样显然不行，因为这两个主机地址明显就不一样，是两个不同的域。那么那些公共网站如何解决这个问题，这就涉及到了CORS跨域,切记跨域只和浏览器有关

首先要说明一下从http://example 到http://example.com/book不属于跨域，而是同源，相当于前端向http://example 这个主机发送了一个请求book，

假设，我访问了一个前端页面，而这个前端页面所在的服务器地址为http://example，但是这个前端页面所需的资源，不可能都存储在一个服务器上，比如

想要成功渲染这个页面就需要向http://api.example/boss请求资源，这就属于跨域，一个网页地址的服务器向另一地址的服务器请求资源。

二、解决方案

一般我们可以通过服务端的过滤器来对CORS跨域进行统一配置，但是这样太麻烦了，Spring Boot也提供了关于CORS跨域的解决方案而且更加简洁，

在springboot工程中，添加一个BookController控制器，并在控制器中设置那些接口支持跨域，设置方法有两种。

1、方案一、@CrossOrigin局部设置跨域

一般是直接在相应的请求方法上加@CrossOrigin注解，也可以在类上添加，两者语法一样

  @RequestMapping("/selectSome")
  @CrossOrigin(value="http://localhost:8081,http://example.com",maxAge = 1800,allowedHeaders = "*")
    public Result selectSome(@RequestBody Lover lover)
   {
       System.out.println(lover);
       Integer age= lover.age;
       return null ;
   }

@CrossOrigin中的value：表示支持的域，这里表示来自http://localhost:8081域的请求是支持跨域的。

maxAge：表示探测请求的有效期，在发送请求前会先发送一个探测请求询问服务端是不是有相应的请求权限，有就发送该请求，但是探测请求不是每次请求前都会发送的，而是有一个有效期，过了这个有效期才会再次发送，此处表示每1800秒发送一次。

还有其他的常用属性

alloweHeaders: 表示支持的请求头

allowCredentials：表示是否允许在跨域请求中包含cookie，由于springboot2.0版本以后，allowCredentials属性值默认为false，如果你想要传递携带cookie,就需要设置为true.

注意：有部分人可能发现自己设置了@CrossOrigin， allowCredentials也设置为true,却依然出现跨域问题

  @CrossOrigin(value = "http://localhost:8000",allowedHeaders = "*",allowCredentials = "true")

但是如果把它修改成以下代码就有效了

  @CrossOrigin(*)
//或者
  @CrossOrigin(value = "*",allowedHeaders = "*",allowCredentials = "true")

注意：出现这种情况是因为你填写的value是后端的域名地址和端口，但是@CrossOrigin的value应该填写的是前端的域名地址和端口

2、方案二、全局配置

这个配置方式也非常简单，实现 WebMvcConfigurer，重写addCorsMappings即可，直接上代码

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/book/**")
               .allowedHeaders("*")
               .allowedMethods("*")
               .maxAge(1800)
               .allowedOrigins("http://localhost:8081","http://example.com");
    }
}

addMapping 表示：所有以/book/开头的访问路径，都会使用这个配置类，例如，/book, /book/details, /book/add 等路径都会匹配这个规则。

allowedMethods表示：用于指定允许的HTTP请求方法，例如：allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")

allowedOrigins表示：支持跨域的域名，可以添加多个

全局配置很方便，但是如果使用了拦截器，不能使用WebMvcConfigurer跨域配置，拦截器是会让跨域配置失效，除非你的请求不需要通过拦截器的校验，比如前端的login请求