前端与AWS EC2部署后端间的CORS问题排查求助

我搭建了一个测试项目，前端通过简单API与后端交互获取字符串，用于验证AWS EC2部署流程。目前已将前后端镜像分别部署至对应EC2实例，端点配置为实例公网DNS，但出现CORS问题。本地正常运行的后端CorsMapping Bean在EC2环境下失效，以下是前后端代码及报错情况：

前端React代码 #

import './App.css';
import { useState } from 'react';

function App() {
  const [message, setMessage] = useState("");

  async function handleClick() {
    const baseUrl = 'http://ec2-xx-xx-xxx-xx.eu-xxxx-x.compute.amazonaws.com'
    // process.env.REACT_APP_BASE_URL || 'http://localhost:8080';

    fetch(baseUrl + "/test", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      mode: 'cors',
      credentials: 'include',
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data.message)
        setMessage(data.message)
      })
      .catch((err) => console.log(err));
  }

  return (
    <div className="App">
      <button onClick={() => handleClick()}>
        CLICK ME
      </button>
      <div>
        <p>{message}</p>
      </div>
    </div>
  );
}

export default App;

后端Spring Boot启动类 #

package com.example.test;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SpringBootApplication
@EnableWebMvc // Enable WebMvc support
public class TestApplication {
    public static void main(String[] args) {
        SpringApplication.run(TestApplication.class, args);
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/test").allowedOrigins("http://ec2-xx-xx-xx-xx.eu-xxxx-x.compute.amazonaws.com");
            }
        };
    }
}

后端Controller代码 #

package com.example.test;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/test")
public class TestController {

    @GetMapping(produces = "application/json")
    private Response getTest() {
        Response response = new Response("Hello");
        return response;
    }
}

CORS报错截图 #

排查与解决方案 #

1. 检查EC2安全组配置
   • 确保后端EC2实例安全组允许前端实例的公网IP（或对应端口）访问后端服务端口（如8080）；前端EC2安全组需允许出站到后端对应端口。
2. 修正CORS配置细节
   • 若前端运行在非80端口（如3000），需在allowedOrigins中添加端口，格式为http://ec2-xx-xx-xx-xx.eu-xxxx-x.compute.amazonaws.com:3000；
   • 因请求设置了credentials: 'include'，不能直接用*允许所有源，需改用allowedOriginPatterns("**")并开启凭证支持：

     @Bean
     public WebMvcConfigurer corsConfigurer() {
         return new WebMvcConfigurer() {
             @Override
             public void addCorsMappings(CorsRegistry registry) {
                 registry.addMapping("/test")
                         .allowedOriginPatterns("**")
                         .allowedMethods("GET")
                         .allowCredentials(true);
             }
         };
     }
     

3. 验证后端服务可达性
   • 用curl测试后端接口：curl http://后端EC2公网DNS:端口/test，确认服务正常启动且公网可访问；
4. 检查前端请求URL
   • 若后端服务运行在非80端口，前端baseUrl需补充端口号，如http://ec2-xx-xx-xxx-xx.eu-xxxx-x.compute.amazonaws.com:8080。

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