前后端联调办理跨域题目标方案

弁言

在前后端分离的开发模式中，前端和后端通常在不同的服务器或端口运行，如许就碰面临跨域题目。跨域题目是指欣赏器因安全限制阻止前端代码访问与当前网页源不同的域、协议或端口的资源。对于 Java 后端应用，我们可以通过配置 CORS（跨源资源共享）来办理跨域题目。
在本文中，我将先容如何通过使用 Spring Boot 中的 @CrossOrigin 注解，办理我在前后端联调过程中碰到的跨域题目。
首先我们要学会如何发现自己出了什么题目，如许才能找到有效的办理方案
打开欣赏器，按F12打开开发者工具，查看，发现如下两个报错，云云可以推断出是哀求跨域出现了错误

1. 跨域题目标产生

当我们的前端和后端分别运行在不同的端口或域时，欣赏器会对前端发出的 HTTP 哀求进行跨域检查。好比，前端运行在 http://localhost:63342，而后端运行在 http://localhost:8080。如果前端直接向后端发哀求，欣赏器会认为这是跨域哀求，从而进行拦截并报错。
常见的跨域题目报错：

• Access-Control-Allow-Origin header is missing
  
• No 'Access-Control-Allow-Origin' header is present on the requested resource
  

2. 使用 @CrossOrigin 注解办理跨域

在 Spring Boot 中，我们可以通过 @CrossOrigin 注解来办理跨域题目。@CrossOrigin 答应我们指定哪些源（origins）可以访问我们的 API，控制是否答应跨域哀求。
2.1 基本配置

我们在 Controller 层的方法或类上添加 @CrossOrigin 注解，并通过 origins 属性指定答应跨域哀求的源。

1. import org.springframework.web.bind.annotation.CrossOrigin;
2. import org.springframework.web.bind.annotation.RestController;
3. import org.springframework.web.bind.annotation.GetMapping;
5. @RestController
6. public class MyController {
8.     // 允许来自 http://localhost:63342 的跨域请求
9.     @CrossOrigin(origins = "http://localhost:63342")
10.     @GetMapping("/data")
11.     public String getData() {
12.         return "Hello from the backend!";
13.     }
14. }

复制代码

在上面的代码中，我们使用了 @CrossOrigin(origins = "http://localhost:63342") 注解，表现只答应来自 http://localhost:63342 的哀求访问 getData() 方法。这就办理了前端哀求 http://localhost:8080/data 时的跨域题目。
2.2 全局配置跨域

除了在每个控制器方法上使用 @CrossOrigin 注解外，我们还可以通过全局配置来办理跨域题目。如许一来，我们无需在每个接口方法上单独配置，实用于整个应用。

1. import org.springframework.context.annotation.Bean;
2. import org.springframework.context.annotation.Configuration;
3. import org.springframework.web.servlet.config.annotation.CorsRegistry;
4. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
6. @Configuration
7. public class WebConfig implements WebMvcConfigurer {
9.     @Override
10.     public void addCorsMappings(CorsRegistry registry) {
11.         // 允许所有路径的跨域请求
12.         registry.addMapping("/**")
13.                 .allowedOrigins("http://localhost:63342") // 允许来自 localhost:63342 的请求
14.                 .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
15.                 .allowedHeaders("*"); // 允许所有请求头
16.     }
17. }

复制代码

上面的配置通过 addCorsMappings 方法配置了全局的跨域规则，使得整个应用都答应来自 http://localhost:63342 的跨域哀求。
3. 测试与验证

配置完成后，我们可以启动后端服务器（假设运行在 http://localhost:8080），然后启动前端应用（假设运行在 http://localhost:63342）。此时，前端通过 AJAX 向后端发起哀求，例如：

1. fetch('http://localhost:8080/data')
2.     .then(response => response.text())
3.     .then(data => console.log(data))
4.     .catch(error => console.error('Error:', error));

复制代码

如果配置准确，前端应可以或许顺利接收到来自后端的数据，而不会再出现跨域相关的错误。
4. 总结

跨域题目是前后端分离架构中常见的一个题目。通过在 Spring Boot 中使用 @CrossOrigin 注解，我们可以非常方便地办理这个题目。我们可以选择局部配置（仅限于某些方法）或者全局配置（实用于整个应用）来满足不同的需求。
在现实开发中，针对不同的跨域需求，机动使用 @CrossOrigin 注解，将极大提高开发效率，制止不须要的跨域哀求错误。
渴望本文对你办理跨域题目有所帮助！如果你有任何题目，欢迎留言讨论。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。