(标签-前端|关键词-跨域)

Question

前端我用Hbuilder写的，后端用的半成品测试是否能将前后端连接起来，解决跨域问题，可是怎么做都发送不成功
结果图：

这是我写发送请求的前端代码：

根据我写的请求路径是
http://localhost:3333/qz/save
后端控制层的代码：

字段和数据库也对应，但是就是测试不成功，是不是后端项目里面的pageController对请求有影响？

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

根据您提供的信息，您遇到的问题确实是跨域（CORS）问题。跨域资源共享（CORS）是一种安全策略，它允许或限制网页对不同源（域名、协议或端口）的资源的访问。当您的前端应用（运行在 http://localhost:8080）尝试向后端服务（运行在 http://localhost:3333）发送请求时，浏览器会检查后端服务是否允许来自前端应用源的请求。

解决这个问题通常有以下几种方法：

1. 后端设置CORS策略

在您的后端服务中，您需要配置CORS策略，允许来自 http://localhost:8080 的请求。在Spring Boot应用中，您可以使用 @CrossOrigin 注解或配置一个全局的CORS过滤器。

使用 @CrossOrigin 注解

在您的控制器类或方法上添加 @CrossOrigin 注解，如下所示：

@CrossOrigin(origins = "http://localhost:8080")
@RestController
@RequestMapping("/qz")
public class QzController {
  // ...
}

配置全局CORS

在您的Spring Boot应用中添加一个配置类，用于全局配置CORS：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

2. 前端代理设置

如果您不想修改后端代码，您也可以在前端开发服务器中设置代理，将所有请求转发到后端服务。在 package.json 中添加一个 proxy 配置：

"proxy": "http://localhost:3333"

这样，当您在开发环境中运行 npm start 时，所有请求都会通过代理服务器发送到后端。

3. 修改后端服务器的响应头

确保您的后端服务器在响应中包含正确的 Access-Control-Allow-Origin 头。这通常需要在服务器的响应配置中设置。

参考资料

• MDN Web Docs - CORS
• Spring Boot - CORS support

代码实现

根据您提供的截图，您的后端代码中已经使用了 @CrossOrigin 注解，但是可能存在一些问题：

• 确保 @CrossOrigin 注解中的 origins 属性正确设置为前端应用的源。
• 检查您的后端服务是否正确启动，并且 @CrossOrigin 注解是否生效。

如果问题仍然存在，您可能需要检查网络请求的具体配置，或者在后端日志中查找更详细的错误信息。

希望这些信息能帮助您解决问题。如果还有其他疑问，请随时提问。