ReactJS中使用Axios发起GET请求遇CORS问题求助

嗨，我来帮你搞定这个跨域问题～你遇到的这个错误其实是个很常见的误区，先给你拆解清楚：

为什么你加Access-Control-Allow-Origin请求头没用？ #

Access-Control-Allow-Origin这个响应头是服务器返回给浏览器的，用来告诉浏览器“我允许这个域名的请求访问我”，而不是前端发请求的时候带给服务器的。你在Axios请求里加这个头，浏览器根本不会认可它，反而会因为跨域规则直接拦截请求，所以问题自然没解决。

正确的解决办法分两种场景： #

1. 服务器端配置CORS（推荐，生产环境必须）

既然这个头是服务器返回的，那我们要在你的Java Servlet里添加响应头：
在Servlet的doGet方法里加入这段代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 允许所有域名跨域访问，生产环境建议指定具体域名
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 允许的请求方法
    response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    // 允许的请求头
    response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    
    // 你的原有业务逻辑代码...
}

如果有多个Servlet需要配置，最好写一个CORS过滤器，统一处理所有请求，这样更高效。

2. 本地开发用React代理（仅开发环境用）

如果你只是本地开发测试，可以在React项目的package.json里添加代理配置：

{
  "name": "your-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:8080", // 这里填你的后端服务地址
  // ...其他配置
}

然后你的Axios请求就可以写成相对路径：

axios.get("/MyWebApplication/MyServlet").then(data => {
  // 你的处理代码
});

这样React开发服务器会自动把请求转发到后端，绕过浏览器的跨域检查，开发时用起来很方便。

总结一下 #

你之前的错误是搞反了Access-Control-Allow-Origin的作用对象，它是服务器给浏览器的“通行证”，不是前端给服务器的“申请单”。按上面的方法配置后，跨域问题就能解决啦～

内容的提问来源于stack exchange，提问作者nix86