How to Solve the 'Mixed Content Blocked' Error in HTTPS AJAX Requests?

"Mixed Content Blocked" Issue in HTTPS AJAX Operations

Problem Overview:

An HTTPS page using AJAX to submit a GET request to an HTTP endpoint encounters the "Mixed Content" error, preventing the operation.

Solution:

The root cause of this error is attempting to load mixed content (HTTPS page accessing HTTP endpoint).

Approach 1: Using PHP File as an Intermediary
If modifying the API to support HTTPS is not feasible, create a PHP file (e.g., form.php) that:

1. Receives the data from the AJAX request.
2. Forwards the data to the HTTP API using cURL.
3. Redirects the user to the "thank you" page.

Approach 2: Content Security Policy (CSP)
If modifying the API or using a PHP file is not possible, add the following meta tag to the HTML page:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

This instructs the browser to automatically upgrade HTTP requests to HTTPS, resolving the mixed content issue.

Recommendation:
Approach 1 is preferred as it ensures secure data submission and prevents the "Mixed Content" error without modifying the HTML page.

The above is the detailed content of How to Solve the 'Mixed Content Blocked' Error in HTTPS AJAX Requests?. For more information, please follow other related articles on the PHP Chinese website!