跨越问题的原因：产生跨域问题原因是浏览器的同源策略，即域名、协议和端口相同。如果不同，就会出现跨域问题。
一、创建项目我们创建了两个项目，一个是provider提供服务，另一个是consumer消费服务，第一个是8080，第二个是8081，然后在provider中为consumer项目提供接口。
provider项目：
接口代码示例如下：
import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RestController;/** * @author qx * @date 2023/06/17 * @desc 提供数据 */@RestControllerpublic class HelloController { /** * 访问hello路径，返回hello字符串返回helllo字符串 */ @GetMapping("/hello") public String hello() { return "hello"; }}consumer项目：
引入thymeleaf依赖，使用页面测试跨越问题。
<!--thymeleaf--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>消费者页面示例代码如下：
import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;/** * @author qx * @date 2023/06/17 * @desc 消费者页面 */@Controllerpublic class IndexController { /** * 访问/index路径打开index.html页面 */ @GetMapping("/index") public String toIndex() { return "index"; }}index.html页面代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="button" onclick="btnClick()" value="click"/><script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script><script> function btnClick() { // 请求provider中的数据接口 $.get('http://localhost:8080/hello', function (msg) { console.log(msg); }); }</script></body></html>单独启动两个项目，点击consumer项目index页面中的按钮。
我们发现数据没有成功访问，页面控制台遇到了跨域访问的异常提示。
三、解决跨域问题1.添加@Crosorigin注释
添加到provider项目的方法中@CrossOrigin注意，参数值是需要跨域访问的目标地址。
示例代码如下：
import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RestController;/** * @author qx * @date 2023/06/17 * @desc 提供数据 */@RestControllerpublic class HelloController { /** * 访问hello路径，返回hello字符串返回helllo字符串 */ @CrossOrigin(value = "http://localhost:8081/") @GetMapping("/hello") public String hello() { return "hello"; }}这意味着这种方法是可以接受的http://localhost:8081/配置完成后，重启provider项目。我们再次在consumer中发送请求。浏览器控制台不会报错，获取provider项目数据。
2.跨域全局配置
在每种方法中添加@crosorigin都很麻烦。在provider项目中，我们通过在springMvc配置类别中重写addcorsmapings来实现全球跨域配置。
示例代码如下：
import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/** * @author qx * @date 2023/06/17 * @desc 全球跨域配置 */@Configurationpublic class WebMvcConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(“/**” .allowedOrigins("http://localhost:8081/") .allowedMethods("*") .allowedHeaders("*"); }}/**意味着本应用程序的所有方法都将处理跨域请求。
alllowedorigins表示可以跨域目标访问地址。
alllowedMethods表示允许通过的数字。
alllowedHeaders表示允许的请求头。
在这种配置之后，我们不必在每种方法上单独进行跨域配置。
我们将provider项目中的provider@去掉Crossorigin注释，重新启动provider项目。
import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RestController;/** * @author qx * @date 2023/06/17 * @desc 提供数据 */@RestControllerpublic class HelloController { /** * 访问hello路径，返回hello字符串返回helllo字符串 */ @GetMapping("/hello") public String hello() { return "hello"; }}继续点击consumer项目index页面上的请求按钮，成功获取数据。
湘公网安备43019002002060