S02L06 - 本地服务器、跨域资源共享 (CORS) 和代理

html

设置本地开发环境：后端、前端、CORS 和代理
目录

介绍 ………………………………………………………………1
理解前端和后端 …………………………2
使用 Spring Boot 设置后端 ……4

前提条件 ………………………………………4
运行后端应用程序………5
使用 Swagger 进行 API 文档编制……………6


使用 Postman 测试 API ………………………………8
使用 React 设置前端 ……………10

运行前端应用程序………11


处理 CORS 问题 …………………………………………13

理解 CORS ……………………………………13
在前端配置代理………………14
修改 Spring Boot 以支持 CORS……………15


结论 ……………………………………………………………………18
附加资源 …………………………………………19


介绍
在现代 Web 开发领域，创建应用程序的前端和后端之间的无缝交互至关重要。本电子书深入探讨了设置本地开发环境的基本方面，重点关注前端和后端集成、处理跨域资源共享 (CORS) 问题以及配置代理。通过本指南的学习，您将掌握高效运行和管理前端与后端应用程序的知识，确保开发工作流程的顺畅。
理解前端和后端
什么是前端？
应用程序的前端是其可见部分——用户界面，用户通过它进行交互。它包括用户直接看到和交互的所有内容，包括布局、设计元素、按钮和交互功能。
什么是后端？
后端，通常称为服务器端，处理应用程序的逻辑、数据库交互、身份验证，并向前端提供数据。它执行处理用户请求并提供适当响应所需的繁重工作。
共生关系
为了使应用程序正常运行，前端和后端必须和谐工作。后端提供前端消费的必要数据和服务，以提供动态和响应迅速的用户体验。


组件
前端
后端


角色
用户界面和用户体验
数据处理、业务逻辑和存储


技术
React, Angular, Vue.js, HTML, CSS, JavaScript
Spring Boot, Node.js, Python, Ruby, Java


交互
发送请求，显示获取的数据
接收请求，处理数据，发送响应


使用 Spring Boot 设置后端
前提条件
在开始设置后端之前，请确保您的本地系统已安装以下内容：

Java Development Kit (JDK) 17：运行基于 Java 的应用程序的必要工具。
集成开发环境 (IDE)：推荐使用 VS Code，因为它具有多功能性和广泛的插件支持。
Spring Boot：简化 Java 应用程序启动和开发的框架。

安装 Java 17

访问 Microsoft OpenJDK 下载页面。
选择 JDK 17 并下载与您的操作系统兼容的安装程序。
按照安装提示在您的机器上设置 Java。

设置 VS Code

从 官方网站下载 VS Code。
安装 Java 和 Spring Boot 所需的扩展，以增强您的开发体验。

运行后端应用程序

在 VS Code 中打开项目：

右键点击项目文件夹。
选择 在终端中打开。
执行 



		
		
			
			
Java
			
			code .
			
				
					
				
					1
				
						code .
					
				
			
		

 以在 VS Code 中启动项目。


选择主文件：

导航到项目中的一个控制器或任何 Java 文件。
点击右上角的 运行 按钮（播放图标）。
VS Code 会识别主方法并启动应用程序。


访问后端：

应用程序启动后，在浏览器中导航到 http://localhost:8080。
您可能会看到类似 /api/v1 的端点，这是您的 API 路由的一部分。



使用 Swagger 进行 API 文档编制
Swagger 是一个强大的 API 文档和测试工具。它提供了一个交互式界面，用于探索和测试您的后端 API。

访问 Swagger UI：

导航到 http://localhost:8080/swagger-ui/index.html 查看 Swagger 文档。
此界面允许您查看所有可用的 API 及其功能。


导出 Swagger JSON：

点击 Swagger UI 中的 Swagger JSON 链接。
将 JSON 文件保存为 api-docs.json 到您的项目目录，以便与 Postman 等工具进一步使用。




使用 Postman 测试 API
Postman 是开发人员测试和与 API 交互的不可或缺的工具，无需前端界面。
安装 Postman

访问 Postman 下载页面。
选择与您的操作系统兼容的版本。
安装并启动 Postman。

将 Swagger 文档导入 Postman

导入 Swagger JSON：

打开 Postman。
点击 导入 并选择您之前保存的 api-docs.json 文件。
这将生成包含所有 API 端点的 Postman 集合。


测试 API 端点：

从集合中选择一个 API 端点。
点击 发送 来执行请求。
在 Postman 的响应面板中查看响应。




使用 React 设置前端
运行前端应用程序
前端应用程序使用 React 构建，这是一个流行的用于构建用户界面的 JavaScript 库。

导航到前端目录：

打开一个新的终端窗口。
使用 



		
		
			
			
Java
			
			cd frontend
			
				
					
				
					1
				
						cd frontend
					
				
			
		

 切换到前端文件夹。


安装依赖项：

运行 



		
		
			
			
Java
			
			npm install
			
				
					
				
					1
				
						npm install
					
				
			
		

 以安装所有必要的软件包和依赖项。


启动前端服务器：

执行 



		
		
			
			
Java
			
			npm start
			
				
					
				
					1
				
						npm start
					
				
			
		

 启动前端应用程序。
默认情况下，应用程序将在 http://localhost:3000 上运行。


验证前端：

打开浏览器并导航到 http://localhost:3000。
您应该会看到显示来自后端的数据的前端界面。



自定义前端 API 调用
替换 API URL
最初，前端可能使用占位符 API。要连接到您的本地后端：

打开前端项目中的相关 JavaScript 文件。
将占位符 API URL 替换为 http://localhost:8080/api/v1。





		
		
			
			
Java
			
			// 示例：src/config.js
const API_BASE_URL = 'http://localhost:8080/api/v1';
export default API_BASE_URL;
			
				
					
				
					1
2
3
				
						// 示例：src/config.js
const API_BASE_URL = 'http://localhost:8080/api/v1';
export default API_BASE_URL;
					
				
			
		



重启前端服务器：

进行更改后，停止当前的前端服务器。
再次运行 



		
		
			
			
Java
			
			npm start
			
				
					
				
					1
				
						npm start
					
				
			
		

 以应用更新。



处理 CORS 问题
理解 CORS
跨域资源共享 (CORS) 是浏览器实现的安全功能，用于限制 Web 应用程序向与提供网页不同的域发出请求。当前端和后端托管在不同的端口或域上时，CORS 策略可能会阻止请求，导致错误。
在前端配置代理
缓解 CORS 问题的一种方法是在前端应用程序中配置代理，允许前端与后端无缝通信。

在 package.json 中添加代理设置：

    



		
		
			
			
Java
			
			{
  // ...
  "proxy": "http://localhost:8080"
}
			
				
					
				
					1
2
3
4
				
						{
  // ...
  "proxy": "http://localhost:8080"
}
					
				
			
		


  
代理配置的效果：

通过此设置，来自前端对 /api/v1 等路径的 API 调用将被代理到 http://localhost:8080/api/v1，从而绕过 CORS 限制。



修改 Spring Boot 以支持 CORS
如果代理不足以解决问题，可以通过修改后端以允许特定来源来解决 CORS 问题。

更新控制器注解：
打开后端项目中的控制器文件。添加带有前端 URL 的 @CrossOrigin 注解。
    




		
		
			
			
Java
			
			// 示例：AlbumController.java
@RestController
@RequestMapping("/api/v1/albums")
@CrossOrigin(origins = "http://localhost:3000")
public class AlbumController {
    // 控制器方法
}
			
				
					
				
					1
2
3
4
5
6
7
				
						// 示例：AlbumController.java
@RestController
@RequestMapping("/api/v1/albums")
@CrossOrigin(origins = "http://localhost:3000")
public class AlbumController {
    // 控制器方法
}
					
				
			
		


  
全局 CORS 配置：
为了更具可扩展性的方法，可以全局配置 CORS。
    




		
		
			
			
Java
			
			// 示例：SecurityConfig.java
@Configuration
public class SecurityConfig {
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
    
    // 其他安全配置
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						// 示例：SecurityConfig.java
@Configuration
public class SecurityConfig {
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
    
    // 其他安全配置
}
					
				
			
		


  
重启后端服务器：

进行更改后，重启后端以应用新的 CORS 设置。



验证 CORS 配置

检查网络调用：

打开浏览器的开发者工具。
导航到 网络 标签。
刷新前端页面并观察 API 调用。


成功的 API 调用：

如果配置正确，API 调用应成功且不会出现 CORS 错误。
来自后端的响应将成功地被前端接收。



结论
设置一个无缝集成前端和后端组件的本地开发环境对于高效的 Web 开发至关重要。通过理解前端和后端的角色，配置如 Spring Boot 和 React 的工具，并通过代理和后端配置处理 CORS 问题，开发人员可以创建强大且安全的应用程序。掌握这些概念不仅简化了开发过程，还为构建可扩展和可维护的 Web 解决方案奠定了坚实的基础。
SEO 关键词：前端开发，后端设置，Spring Boot，React 集成，处理 CORS，配置代理，本地开发环境，使用 Postman 测试 API，Swagger API 文档，Java 17 设置，VS Code 用于 Java，CORS 策略，跨域资源共享，Web 开发最佳实践
附加资源

Spring Boot 文档
React 官方网站
Postman 学习中心
理解 CORS
Swagger UI 指南
VS Code 的 Java 扩展
Java 17 下载


本电子书提供了设置本地开发环境、集成前端和后端应用程序以及有效管理 CORS 问题的全面指南。通过遵循所述步骤，开发人员可以确保其 Web 开发项目中的工作流程顺畅高效。
注意：本文是由 AI 生成的。
组件	前端	后端
角色	用户界面和用户体验	数据处理、业务逻辑和存储
技术	React, Angular, Vue.js, HTML, CSS, JavaScript	Spring Boot, Node.js, Python, Ruby, Java
交互	发送请求，显示获取的数据	接收请求，处理数据，发送响应