How to Set Up CORS When Using Firebase Hosting with a Spring Boot API

When deploying your frontend with Firebase Hosting, you’ll get a URL like this:

https://your-project-id.web.app

Meanwhile, your Spring Boot backend might be hosted at:

http://your-server.com

Since these are different origins, browsers will block requests from your frontend to your backend unless you explicitly allow them. That’s where CORS (Cross-Origin Resource Sharing) comes in.

---

⚙️ How to Enable CORS in Spring Boot

In your SecurityConfig.kt file, add the following bean:

@Bean
fun corsConfigurationSource(): CorsConfigurationSource {
    val config = CorsConfiguration()
    config.allowedOrigins = listOf(
        "http://localhost:5173",                // for local development
        "https://your-project-id.web.app"       // Firebase Hosting domain
    )
    config.allowedMethods = listOf("GET", "POST", "PUT", "DELETE", "OPTIONS")
    config.allowedHeaders = listOf("*")
    config.allowCredentials = true

    val source = UrlBasedCorsConfigurationSource()
    source.registerCorsConfiguration("/**", config)
    return source
}

💡 Tips

• Make sure to include both localhost and the actual deployed Firebase domain.
• allowedOrigins must include the full URL with http or https.
• If you're sending cookies or authorization headers, allowCredentials = true is required.

---

✅ Summary

• When frontend and backend are on different domains, CORS will block requests by default.
• You can resolve this by explicitly allowing origins in your Spring Boot configuration.
• Don’t forget to include your Firebase Hosting URL in allowedOrigins.

With CORS configured properly, your Vue frontend deployed on Firebase can communicate seamlessly with your Spring Boot API.