# CORS Configuration

## Current Setup ✅

Your backend is already configured with CORS enabled for your frontend.

### Configuration File: `src/config/cors.js`

```javascript
const whitelist = [
  "http://localhost:3000",  // React local (Create React App)
  "http://localhost:5173",  // Vite local ✅
  "https://your-production-domain.com"
];

const corsOptions = {
  origin: function (origin, callback) {
    // Allow requests with no origin (mobile apps, curl, Postman)
    if (!origin) return callback(null, true);

    if (whitelist.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error("Not allowed by CORS"));
    }
  },
  credentials: true,  // ✅ Allows cookies and auth headers
  methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
  allowedHeaders: ["Content-Type", "Authorization"]
};
```

## What's Enabled:

✅ **Vite Frontend**: `http://localhost:5173`  
✅ **Credentials**: Cookies and Authorization headers  
✅ **Methods**: GET, POST, PUT, PATCH, DELETE  
✅ **Headers**: Content-Type, Authorization  

## Frontend Configuration

### Axios Setup (Recommended)

```javascript
// src/api/axios.js
import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:5000/api",
  withCredentials: true,  // Important for CORS with credentials
});

// Add token to all requests
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default api;
```

### Usage

```javascript
import api from "./api/axios";

// Login
const response = await api.post("/auth/login", userData);

// Create location
const location = await api.post("/locations", locationData);
```

### Alternative: Direct Axios

```javascript
import axios from "axios";

const response = await axios.post(
  "http://localhost:5000/api/auth/login",
  userData,
  {
    withCredentials: true,  // Enable credentials
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${token}`
    }
  }
);
```

## Adding More Origins

To add more allowed origins (e.g., production domain):

```javascript
const whitelist = [
  "http://localhost:3000",
  "http://localhost:5173",
  "https://your-production-domain.com",  // Update this
  "https://app.yourdomain.com",          // Add more as needed
];
```

## Development vs Production

### Development (Current)
- Allows localhost:5173 (Vite)
- Allows localhost:3000 (React)
- Allows requests with no origin (Postman, curl)

### Production (Update Before Deploy)
1. Replace `"https://your-production-domain.com"` with your actual domain
2. Remove localhost origins or use environment variables:

```javascript
const whitelist = process.env.NODE_ENV === "production"
  ? ["https://app.yourdomain.com"]
  : ["http://localhost:3000", "http://localhost:5173"];
```

## Troubleshooting

### CORS Error in Browser Console?

**Error**: `Access to XMLHttpRequest at 'http://localhost:5000/api/...' from origin 'http://localhost:5173' has been blocked by CORS policy`

**Solutions**:
1. ✅ Check whitelist includes your frontend URL
2. ✅ Ensure `withCredentials: true` in frontend requests
3. ✅ Restart backend server after changing CORS config
4. ✅ Clear browser cache

### Preflight Request Failing?

**Error**: `Response to preflight request doesn't pass access control check`

**Solution**: Ensure OPTIONS method is allowed (already configured in your setup)

## Testing CORS

### Test with curl:

```bash
# Test preflight (OPTIONS)
curl -X OPTIONS http://localhost:5000/api/auth/login \
  -H "Origin: http://localhost:5173" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: Content-Type,Authorization" \
  -v

# Test actual request
curl -X POST http://localhost:5000/api/auth/login \
  -H "Origin: http://localhost:5173" \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com"}' \
  -v
```

## Summary

Your CORS is **already configured correctly** for:
- ✅ Vite frontend on port 5173
- ✅ Credentials (cookies, auth headers)
- ✅ All necessary HTTP methods
- ✅ Authorization header support

**No changes needed!** Your frontend can now make authenticated requests to the backend.