I’m using the Playwright framework to browse my website and need to switch all requests to HTTP, since there’s a reverse proxy in my pod that redirects traffic to localhost. When attempting to access my API in headless mode, I encounter this error message:
Mixed Content: The page at 'https://api.myapi.dev/' was loaded over HTTPS, but requested an insecure resource 'http://api.myapi.dev/?email=test_user@company'. This request has been blocked; the content must be served over HTTPS.
What steps can I take to resolve this issue while still using HTTP?
To complement the previous answer, if you are working in a development environment and can afford to avoid HTTPS temporarily, consider setting up a reverse proxy or adjusting your proxy to handle SSL termination. This helps if you need to separate HTTP from HTTPS more distinctly before your headless browser processes requests.
Additionally, you may leverage Playwright’s route and request interception features to programmatically modify requests to ensure they comply with your setup:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({
headless: true
});
const context = await browser.newContext();
const page = await context.newPage();
await page.route(‘**/*’, (route, request) => {
const url = request.url().replace(‘https:’, ‘http:’);
route.continue({ url });
});
await page.goto(‘http://api.myapi.dev/’);
// Additional script logic
await browser.close();
})();
This intercepts all outgoing requests and modifies the URL scheme from HTTPS to HTTP. It's a workaround for testing purposes and should generally be used with caution, particularly in production environments to ensure secure communication.