When deploying on vercel everything is working fine. After deploying my data is not showing on the vercel hosted website

When deploying on vercel everything is working fine. After deploying my data is not showing on the vercel hosted website.
index-BXxkAIDw.js:42 Mixed Content: The page at ‘https://app-developement-admin-panel-frontend.vercel.app/dashboard’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://{our main url}/api/v1/{someurl}/{some}’. This request has been blocked; the content must be served over HTTPS.

One more thing actually i m calling an api from the backend starting with http not s can we do it without https.

If your web app is being hosted over HTTPs as you’ve indicated, then all external resources it is consuming (CDN, scripts, CSS files, API calls) should also use SSL and be secured through HTTPs. Think about it. It would defeat the purpose of your app being secure, if your app was in turn making insecure requests to an API.

You can either therefore:

  1. As Chrome suggests, change your API calls to use HTTPs (recommended)
  2. Add the following meta tag to your <head> element in your HTML:<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

More information about this can be found here: CSP: upgrade-insecure-requests - HTTP | MDN. you can use this only if your resource API supports the HTTPS request.

for example: “http://ip-api.com/json” and “https://ip-api.com/json” both will not return the same response if “ip-api.com” doesn’t support HTTPS requests.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.