Careeroza

Real World Example

SPA + API in Production

Most modern products (Swiggy web, Razorpay Dashboard, Zerodha Kite) are a JavaScript frontend talking to JSON APIs. In production the React build is usually served from a CDN or Nginx on https://shopease.in and the API runs on https://api.shopease.in, so CORS must allow exactly that origin.

Example

Production CORS origin comes from config, not code:

SHOPEASE_FRONTENDURL=https://shopease.in java -jar shopease.jar --spring.profiles.active=prod

Note: Relaxed binding maps SHOPEASE_FRONTENDURL to shopease.frontend-url.

ShopEase: Product Catalogue Page End to End

Browser (https://shopease.in)                       Spring Boot (https://api.shopease.in)
  ProductList mounts
  useEffect -> fetch GET /api/products  ----------->  CorsFilter: origin allowed
                                                      ProductController.list()
                                                      ProductService -> ProductRepository -> MySQL
  setProducts(json)  <---------- 200 [ {...}, {...} ]  + Access-Control-Allow-Origin
  table re-renders

Example

Check the production API exactly as the browser would:

curl -i https://api.shopease.in/api/products -H "Origin: https://shopease.in"

Example output

HTTP/2 200
access-control-allow-origin: https://shopease.in
vary: Origin
content-type: application/json

[{"id":1,"sku":"ELE-1001","name":"Wireless Mouse","description":"2.4 GHz, silent clicks","price":799.00,"stock":120,"category":"Electronics","inStock":true}]

Tip: Login, JWT tokens and protected React routes for ShopEase are built in the Spring Security material (medium level).