Spring Boot解决跨域问题（端口不一致）

目录

一、什么是跨域

二、跨域产生的原因

三、当遇到不同端口之间的跨域访问时

@CrossOrigin注解

添加注解

四、当解决完跨域问题发现发送请求时不带cookie

问题情况：

 解决：

五，注意

一、什么是跨域

跨域是指在浏览器中，当一个网页的脚本试图去访问另一个网页的资源时，如果这两个网页的域名、协议或端口不一致，就会发生跨域问题。

浏览器出于安全考虑，实施了同源策略，即限制不同源之间的交互。同源是指两个页面具有相同的协议、主机和端口号，跨域问题通常发生在以下情况。

1. 不同子域之间的跨域访问，例如a.example.com和b.example.com之间的通信。
2. 不同域名之间的跨域访问，例如example.com和example.net之间的通信。
3. 使用不同协议进行通信，例如http和https之间的通信。
4. 不同端口之间的跨域访问，例如example.com:8080和example.com:8888之间的通信。

二、跨域产生的原因

之所以产生跨域主要是因为浏览器同源策略的限制。
同源策略，它是由NetSpace提出的一个著名的安全策略。
当一个浏览器的两个tab页中分别打开来自百度和谷歌的页面，当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

三、当遇到不同端口之间的跨域访问时

@CrossOrigin注解

我们可以在特定的某些接口加上@CrossOrigin注解，表示该接口允许跨域访问。注：未加该注解的接口仍不允许跨域访问。

@CrossOrigin注解中的origins还可设置域名，表示只有该域名访问时允许跨域，如：@CrossOrigin(origins =“http://localhost:5173/”)；
若origins未设置值，表示所有域名都可以跨域访问该接口

添加注解

如果只要跨域一个接口的话，可在该接口上添加注解

@RestController
@RequestMapping("/account")
public class AccountController {
 
    @CrossOrigin(origins = {"http://localhost:5173/"})
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }
 
    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

 如果所有接口都要跨域的话可以再类上添加注释

@RestController
@CrossOrigin(origins = {"http://localhost:5173/"})
public class UserController {

    @Resource
    private UserService userService;

    @Resource
    private RedisTemplate<String, Object> redisTemplate;
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }
 
    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }


}

四、当解决完跨域问题发现发送请求时不带cookie

问题情况：

这是请求头没有带cookie,如图:

 这是请求头带cookie的情况

 解决：

1.前端：当遇到这种情况时，且是用axios请求时可以在axios页面添加这一行代码

// 允许携带cookie
axios.defaults.withCredentials=true

2.后端：并且修改@CrossOrigin注解

//修改之前
@CrossOrigin(origins = {"http://localhost:5173/"})
//修改之后 allowCredentials：是否允许携带cookie
@CrossOrigin(origins = {"http://localhost:5173/"}, allowCredentials = "true")

3.最后如果在接口的类上添加@CrossOrigin注解，并且如上设置后，有的接口携带cookie,有的接口没有携带cookie，可以去前端全局搜索withCredentials，看一看发送请求时里面的配置，如果如图设置withCredentials=false，给接口也不带cookie。

五，注意

说明： 文章中很多地方为了方便，Access-Control-Allow-Origin设置成了*，这个在开发测试的时候可以这么设置，但如果是生产环境，建议不要设置成*，最好是允许哪些域名访问就设置哪些，毕竟限制域名还是很有必要的。