Im grabbing image src from url and the image doesnt show on the page. If I go to the inspector and click on the img url it shows up on the new tab just fine. Also if I right click the "img not there" img, and open image in new tab it also shows just fine. It says in the network tab that there is a 404 but im just confused why it says that cause if I click the url for the src it shows up. I learned a little about CORs and nothing ive tried for that has worked so far. Made a free account for webhosting here thinking maybe something more real would work but same thing. https://funkocollector.x10.mx/ You can try searching for like Luke and see the other images dont load as well.
inspector showing src is correct
Network tab showing 404
Image showing up not on http
Image not showing on localhost
You are correct; this is most likely a CORS block. Just to be sure, check for a CORS protocol error message in the Inspect screen.
The CORS (cross-origin resource sharing) protocol limits what you can link to from your http server for network security reasons. Your link may or may not be blocked depending on the type of file and the settings of the server you are linking to. You have 2 solutions, both relatively simple:
Quick fix: since you can open the image source, simply download the file to your computer and upload onto your server. Change the href to your own site.
Long-term solution: get an ssl on your server. If you’re registered with dns, get cloudflare for your server. You’ll then be accessible as https, and CORS won’t be a problem.
I have https on my page but Chrome says it is not secure. I dont understand what is wrong. Look at the screenshot.
You are loading an image over HTTP and so the content is mixed causing the warning.
The image in question is dark-grey-tile.png it's coming from http://plugins.jquery.com/jquery-wp-content/themes/jquery/images/dark-grey-tile.png note the http here - not https
In my HTTPS enabled site I have added an iframe that should show content from my other site, but it is not working under https.
<iframe src="//myothersite.com"></iframe>
In Firefox latest version everything works good.
In Chrome, the iframe isn't loaded and in the console I see these two errors
Mixed Content: The page at 'https://mysite' was loaded over HTTPS, but requested an insecure resource 'http://myothersite.com'.
This request has been blocked; the content must be served over HTTPS.
Failed to load resource: net::ERR_CACHE_MISS
In IE content load incorrectly and I see an alert message; if I click Allow Insecure Content, it loads correctly.
The question is: how I can do that IE and Chrome as in Firefox (load mixed content without any alerts)?
Note: I haven't changed any browser settings.
Actually Firefox has started to do the same: How to fix a website with blocked mixed content
It makes sense. If the user access a site using HTTPS is expecting to have a secured experience, and he may not be aware of parts of the application loading under not secure connections. That is the reason why the browser blocks such inconsistency.
You will need to provide HTTPS on myothersite.com.
Obviously it's best not to have mixed content to prevent MITM attacks but for those who can't control the url this should do the trick:
Change the src="http://linkToUrl.com" to
src="//linkToUrl.com/script.js"
enter image description here
when i set the url :
from a https request, it report error :
Mixed Content: The page at 'https://127.0.0.1/index.html' was loaded over HTTPS, but requested an insecure resource 'http://127.0.0.1:8080/download/1.txt'.
This request has been blocked; the content must be served over HTTPS.
Failed to load resource: net::ERR_CACHE_MISS
when i added the target="_blank" to the url: <a target="_blank" href="http://127.0.0.1:8080/download/1.txt">, it works! , it works!
it's well known that target="_blank" means opening the linked document in a new window or tab or a new request!
I'm sorry this isn't as technical as the other answers, but I had the same problem linking jsquery like this, and for me it fixed just by changing http:// to https://. It may not work, but it worked for me and it might work for you.
Problem is mixed content, the browser won't allow us to just do that.
You need change url from:
http://example.com
to
//example.com
I'm having other complication with CloudFlare, it doesn't load as the file has been cached as http. Just go to CloudFlare and "Purge Everything" in cache tab, or else turn on "Development Mode".
I encountered my 2 browsers (IE 11 and Firefox) running on Windows 7 display blank page contents if I entered Http URL like Http google website but if I entered Https URL like Https google it works perfectly fine as usual, all contents displayed out. I also noticed the problem only happened when I was using my mobile data plan hotspot. If I use another network connection both Http and Https work fine. Could it be the some setting I accidentally changed and caused the issue? Please advice.
My browser is session authenticated with a website.
I am using their API to pull down images from the site so I can display them on my page.
Visiting that image url displays the image, putting it in an img tag does not:
<img src = "https://files.something.com/123123" />><!-- this doesn't show -->
arse<!-- this works -->
Any ideas on why? and how I might overcome it?
If I put in http for the link, it redirects to https any way.
There's two things worth bearing in mind here:
Your host is automatically redirecting to https. Is this deliberate?
I suspect that you're seeing coming up against cross-domain security, or that your server is actively refusing it.
To trouble-shoot: you'll want to find out what response you're getting from your images.
Open up either the 'NET' tab in Firebug, or 'Network' in Chrome Developer Tools and watch the page-load. I suspect you're going to see those images come through red with an error number. Once you've got that it's very easy to trouble-shoot why the server's refusing to serve the images.