SpringBoot解决跨域的问题

产生跨域问题的原因是浏览器的同源策略，所谓同源是指：域名，协议，端口相同。如果不同，将会出现跨域问题。

一、创建项目

创建两个项目，一个命名为provider提供服务，一个命名为consumer消费服务，第一个端口配置为8080，第二个端口配置为8081，然后在provider中提供一个接口，供consumer里访问。

provider:

package com.example.provider.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author qinxun
 * @date 2023-06-16
 * @Descripion: 提供数据
 */
@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "hello";
    }

}

consumer:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * @author qinxun
 * @date 2023-06-16
 * @Descripion: 消费者页面
 */
@Controller
public class IndexController {

    @GetMapping("/index")
    public String toIndex() {
        return "index";
    }
}

测试页面index.html

二、跨域问题产生

分别启动两个项目，点击consumer项目中页面的按钮。

 

没有成功访问到数据，遇到了跨域访问的异常提示。

三、解决跨域 

1.加@CrossOrigin注解

在provider项目的方法中加上@CrossOrigin注解，参数值为可以跨域访问的目标地址。

示例代码如下:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author qinxun
 * @date 2023-06-16
 * @Descripion: 提供数据
 */
@RestController
public class HelloController {

    @CrossOrigin("http://localhost:8081/")
    @GetMapping("/hello")
    public String hello() {
        return "hello";
    }

}

表示这个方法可以接受来自http://localhost:8081/地址的请求，配置完成后重启provider项目，我们再次在consumer中发送请求，浏览器控制台不会报错，获取到了数据。

 

 2.跨域全局配置

在每个方法都加上@CrossOrigin很麻烦，我们可以通过在SpringMvc配置类中重addCorsMappings实现全局的跨域配置。

示例代码如下:

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

/**
 * @author qinxun
 * @date 2023-06-16
 * @Descripion: 全局跨域配置
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

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

/**表示本应用的所有方法都会去处理跨域请求，allowedOrigins表示可以跨域的目标访问地址，allowedMethods表示允许通过的数，allowedHeaders表示允许的请求头。这样配置之后，我们就不必在每个方法上都单独的跨域配置了。