Netlify Mixed Content Issue

If you **must** make HTTP requests from a Netlify-deployed HTTPS site, you have two options:

—

### ✅ **Recommended Solution**: Enable HTTPS on your API Server (EC2):

Since Netlify always serves your frontend over HTTPS, the best and safest solution is to **enable HTTPS** on your EC2 instance. Use a free certificate provider like **Let's Encrypt**.

Here's how you can quickly set it up on your EC2 Ubuntu server:

# SSH into your EC2 instance
ssh ubuntu@ec2-51-20-60-238.eu-north-1.compute.amazonaws.com

# Install certbot (Let's Encrypt)
sudo apt update
sudo apt install certbot python3-certbot-apache -y

# Request a certificate (Replace with your domain if you have one)
sudo certbot --apache -d your-domain.com

After enabling HTTPS, update your API endpoint to:

const url = 'https://your-domain.com/api/send-otp-password';

—

### ⚠️ **Alternative (Not Recommended)**: Using an HTTP Proxy (for testing purposes only):

If you're unable to set up HTTPS immediately, you can temporarily use a proxy that supports HTTPS to forward your requests to your HTTP endpoint. Services like **Cloudflare Workers** or **Netlify Redirects** can act as secure proxies.

**Example with Netlify `_redirects`:**

Create a file named `_redirects` in your project's `public` directory with:

/api/*  http://ec2-51-20-60-238.eu-north-1.compute.amazonaws.com/api/:splat  200!

Then, in your Vue app, you can call:

const url = '/api/send-otp-password';

Netlify will securely proxy this request over HTTPS.

—

### ❌ **Why You Can't Use Plain HTTP Directly:**

Modern browsers strictly enforce secure connections on HTTPS pages to prevent man-in-the-middle attacks. There's no way around this if the frontend is HTTPS.

—

### 🔐 **Recommended Approach:**

Ultimately, **enabling HTTPS** on your backend is the safest, easiest, and best-practice approach. It ensures compatibility with browsers and keeps your users' data secure.

Would you like detailed steps to quickly enable HTTPS on your EC2 server?

Here's how you do it clearly and explicitly:

### Step-by-step:

1. **Create or update** your `_redirects` file in your Netlify project's public or dist directory (`public/_redirects` or `dist/_redirects`):

/api/send-otp-password http://ec2-51-20-60-238.eu-north-1.compute.amazonaws.com/api/send-otp-password 200!

This line means:

– Requests to your Netlify site at:

https://your-netlify-domain.netlify.app/api/send-otp-password

are proxied directly to:

http://ec2-51-20-60-238.eu-north-1.compute.amazonaws.com/api/send-otp-password

– `200!` forces Netlify to rewrite/proxy the request without changing the URL in the browser (invisible proxying).

2. **Update your JavaScript Axios request** in your Vue app to:

// Change this:
const url = 'http://ec2-51-20-60-238.eu-north-1.compute.amazonaws.com/api/send-otp-password';

// To this:
const url = '/api/send-otp-password';

Now, your app makes the request over HTTPS (to Netlify), and Netlify securely forwards the request over HTTP to your backend API.

—

### ✅ **Why this works safely:**

– The browser → Netlify connection remains HTTPS-secured.
– Netlify → EC2 connection is HTTP internally, bypassing browser security restrictions.

—

### 🚨 **Important:**

This is suitable for testing or development. In production, you should enable HTTPS on your EC2 instance to ensure security.

Let me know if you need more help!