正在将带有React中的参数的get请求发送到Java后端，但在请求的资源上显示No 'Access-Control-Allow-Origin‘标头

当你在React前端应用中发起跨域GET请求到Java后端时，遇到“No 'Access-Control-Allow-Origin' header is present on the requested resource”错误，这是因为浏览器的同源策略限制了跨域请求。为了解决这个问题，你需要在Java后端配置CORS（跨源资源共享）。

基础概念

CORS是一种机制，允许服务器声明哪些源（域）有权限访问其资源。通过在服务器响应中添加特定的HTTP头，浏览器可以决定是否允许跨域请求。

解决方案

在Java后端，你可以使用多种方式来配置CORS。以下是几种常见的方法：

方法一：使用Spring Boot的@CrossOrigin注解

如果你使用的是Spring Boot框架，可以在控制器类或方法上添加@CrossOrigin注解。

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

@RestController
@CrossOrigin(origins = "http://yourfrontenddomain.com")
public class YourController {

    @GetMapping("/your-endpoint")
    public String yourMethod(@RequestParam String param) {
        // 处理请求
        return "Response with param: " + param;
    }
}

方法二：全局CORS配置

你也可以通过配置一个全局的CORS过滤器来处理所有的跨域请求。

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

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://yourfrontenddomain.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

方法三：使用Filter

如果你不使用Spring Boot，可以通过实现一个Filter来添加CORS头。

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "http://yourfrontenddomain.com");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {}

    @Override
    public void destroy() {}
}

然后在你的web.xml中配置这个Filter：

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>com.yourpackage.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

应用场景

CORS广泛应用于现代Web应用中，特别是在前后端分离的架构中。它允许前端应用从不同的域访问后端资源，从而实现更灵活的部署和扩展。

注意事项

安全性：在生产环境中，应该精确控制允许的源（allowedOrigins），避免使用通配符*，以防止安全风险。
凭证：如果需要在前端发送包含凭证（如Cookies）的请求，确保后端设置了Access-Control-Allow-Credentials为true，并且前端请求中也设置了withCredentials为true。

通过上述方法配置CORS后，你的React应用应该能够成功发送跨域GET请求到Java后端。