Looked over some relevant posts:
Why am I getting a 404 error with ng-src even though image is appearing?
AngularJS ng-src path to image
Understanding AngularJS ng-src
Conditionally change img src based on model data
but none have the exact same symptoms.
This line of code,
<img ng-src="{{movie.Poster}}" alt="">
where movie is JSON and movie.Poster is a string of a url, seems to be the root of this error:
GET http://ia.media-imdb.com/images/M/MV5BMTk3OTIzODUyOV5BMl5BanBnXkFtZTYwNjgxNjA5._V1_SX300.jpg 403 (Forbidden)
Because the image url is good and complete in the error, the url string property movie.Poster seems to have been passed to ng-src ok/in time. However, many of the seemingly relevant posts emphasize that asynchronicity of JS may be responsible (and in this case movie.Poster does depend on a response from an API).
But if the url is in the error, why does ng-src have a problem requesting the image and displaying anything at all? An above post closest to my issue was able to load the image AND give the console error...
Perhaps the oddest thing is if I navigate to the image url (by copying and pasting that url) into another tab on the browser, then return to my app and click back then forward, the image loads without error!
I tried ng-if="movie.Poster"
and...
$scope anotherVar = movie.Poster in the controller and then ng-src="{{anotherVar}}"
Your Error is 403.
Which indicate that the server can be reached and understood the request, but refuses to take any further action. Status code 403 responses are the result of the web server being configured to deny access, for some reason, to the requested resource by the client .
Your image URL may be correct but you don’t have permission to access that.
http://ia.media-imdb.com/images/M/MV5BMTk3OTIzODUyOV5BMl5BanBnXkFtZTYwNjgxNjA5._V1_SX300.jpg
Doesn't seem to be an angular problem, as much as one with the API,
403 when trying to download a remote image
403 error for loading image from http and not https
Confused about how to handle CORS OPTIONS preflight requests
So, it seems that the headers need to be modified according to the first linked post in this answer...
But I checked that User-Agent is defined in the request to the image and it is...Even tried hard-coding one of the urls in the ng-src and THAT gave same 403...
AND I have colleagues who built the same app with same api without issue!
Related
If I open these images directly on the browser, it won't work, but on the snipped it work. And I my localhost, I doesn't. Why is that? This is the error I am getting from my console log. How can I make sure that the images are always showing?
nikon-d1x-s.jpg:1 GET
http://www.vistaview360.com/cameras/images/nikon_images/nikon-d1x-s.jpg
403 (Forbidden) nikon-d1-s.jpg:1 GET
http://www.vistaview360.com/cameras/images/nikon_images/nikon-d1-s.jpg
403 (Forbidden) nikon-e3s-s.jpg:1 GET
http://www.vistaview360.com/cameras/images/nikon_images/nikon-e3s-s.jpg
403 (Forbidden) nikon-e2n-s.jpg:1 GET
http://www.vistaview360.com/cameras/images/nikon_images/nikon-e2n-s.jpg
403 (Forbidden) nikon-e2-s.jpg:1 GET
http://www.vistaview360.com/cameras/images/nikon_images/nikon-e2-s.jpg
403 (Forbidden) dance.html:145 scrool
<img src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d1x-s.jpg" "/>
The site is preventing you from accessing the images across site origins. The host is most likely only allowing origins from their domain or blocking based on a header like user-agent. They're doing this so you can't host the images on another site because they have to pay for the bandwidth every time it's accessed. So the answer is, you cannot cross host the images like this.
Instead, you'll need to download the images and host them yourself or contact the host and ask them to whitelist your domain. This will not help for localhost, however.
Most likely, the server has some checks in place to prevent hot linking.
Those checks vary in type. Some servers check the referrer string, others some cookies, etc.
I wouldn't try to include those images in your website because the intentions are clear: the remote server doesn't want you to include them and you don't know which measures they'll implement in the future to prevent you from doing that, so it could break at any time.
Instead, download those images and serve your own copies (provided you are not infringing any copyright, that is...)
If you still want to hot link them, compare the headers in the requests your browser is making with the ones sent when you can access them to try and find the culprit.
I'm working on a Chrome extension part of which is a function which manipulates images on a page using canvas and its context.getImageData function. That's when I ran into CORS issues. It's my understanding that a server serving an image has to server said image with appropriate CORS headers in order for cross-domain requests to be successful. I started reading up on this (to me) new and unfamiliar technology (tutorial). A substantial number of servers doesn't employ CORS and it's very important for the function of my extension that every image is processed. I've spent a whole day trying to circumvent this issue using client-side scripting but came to the conclusion that the only way is to send the image url to a server and then serve it back with the needed CORS headers (Access-Control-Allow-Origin: *). Now before I get into explaining my implementation I'd like to quote a paragraph from the tutorial page I linked previously.
Cross-Domain from Chrome Extensions
Chrome extensions support cross-domain requests in a two different ways:
Include domain in manifest.json - Chrome extensions can make cross-domain requests to any domain if the domain is included in the "permissions" section of the manifest.json file:
"permissions": [ "http://*.html5rocks.com"]
The server doesn't need to include any additional CORS headers or do any more work in order for the request to succeed.
This should mean that "permissions": "<all_urls>" should circumvent same origin policy restrictions. However, this does not work.
My solution
An XMLHttpRequest passes the image url and callback function to the server on localhost (for testing purposes) which first sets the appropriate header:
header('Access-Control-Allow-Origin: *');,
and then prints a JSON encoded array containing image width, height, and using file_get_contents, imagecreatefromstring, and base64_encode, the equivalent of context.getImageData and a call to the callback function.
The callback function sets the src property of an Image Object (that has crossOrigin set to Anonymous) which is used for drawing the images onto the canvas and sets it's width and height properties.
Result
The expected result was for every image to be loaded and processed without raising a Cross-origin image load denied by Cross-Origin Resource Sharing policy error, however now every image seems to be served without the needed CORS headers crippling my extension. I checked the headers the page on localhost which processes this request sends and it seems to be okay. (screenshot)
Conclusion
My implementation of this solution seems like it should work and I really have no idea why it doesn't. The server is sending the Access-Control-Allow-Origin header, the image data is good and the callback function is called. This is the only issue left to resolve before release. This is a really intriguing issue. I realise the header I'm sending isn't the only one I might want to send but it's sufficient for testing purposes.
I hope this question was clear, and detailed enough for someone to help me resolve this issue. Please do not hesitate to ask for more information and/or code snippets as I didn't really include any code in an attempt to keep this concise.
If your image src is a data uri (base64 encoded image data), then there is no headers to set access control.
Just set the image source to the url you're calling in ajax and send back the image not encoded(echo file_get_contents).
I'm trying to get an image from the link:
http://www.ims.gov.il/Ims/Map/MapRender.aspx?type=weather&LangId=1&Optional=c&Tab=Temperature
Sometimes it works, and at other times instead of getting an image I receive this strange HTML:
<html><body><script>document.cookie='rrrrrrr=27b8c912rrrrrrr_27b8c912; path=/';window.location.href=window.location.href;</script></body></html>
What does it mean and how can I bypass this to get the image?
I've encountered this problem in my Android app which uses URLConnection, and reproduced it in chrome with incognito mode and blocked javascript and cookies.
The response is setting a cookie and then attempting to reload the page. Some things you could try:
Just re-request the image if the first attempt fails.
Try setting the cookie yourself in the URL request.
I've a web application wich makes Ajax requests to a server with Codeigniter-php code. The Ajax requests work correctly in local server but not when the application is hosted in remote server.
The console errors are:
XMLHttpRequest cannot load http://localhost/CI-example/index.php/control/controlHome. Origin http://www.page.com is not allowed by Access-Control-Allow-Origin.
Surprisingly, the request is made in the server but not the response.
The URL that I use to Ajax request is:
AJAX_URL = "http://localhost/CI-example/site/index.php/control/controlHome";
But, also I've tried with:
AJAX_URL = "http://www.page.com/CI-example/site/index.php/control/controlHome";
And the next error is captured:
POST http://www.page.com/webdom/site/index.php/control/controlHome 500 (Internal Server Error)
How can I do?
Edit:
www.page.com is a subdomain. Is necessary to do some configuration when a subdomain is used to Ajax request?
And the folders organization is:
/CI-example
---/application/controllers/control.php
---/system
---/site/js/ajaxRequest.js
As I am getting here, while you are sending ajax requests to the server than it's returning 500 (Internal Server Error). I'm sure that the error is from server side, and there may be following reason-
If everything is fine in the codes, then may be your base_url is different from what you are requesting. Yes this can cause the problem, for example if you have hosted your web application and your base_url is www.mysite.com and you are requesting for mysite.com.
Next reason may be, that you have developed your project in windows or any system which is in-case-sensitive but when you will upload to any linux like server than each and every file name will be case-sensitive. For example suppose a model file name you have given is MyModel.php but when you will load the model, it will generate the error like Unable to find the specific class.
You cannot make HTTP POST requests using AJAX to a different domain, unless that page allows you to do so using a special header called "Access-Control-Allow-Origin".
localhost is different to page.com which is why this will not work.
Response on the http://www.page.com's url say something has gone wrong during the page execution. Your PHP error log should help you to find what.
Adding the line ini_set('display_errors', 1) might return the error to the ajax request, in the error handler. Don't forget to remove the line after use, you don't want this lying around in production code.
The second error is : 500 (Internal Server Error)
This means there was an error on the server side - not a cross-origin policy problem.
This is probably an error in the execution of your PHP script.
Check your error log (e.g : if you use the standard LAMP stack, the error log should be somewhere in /var/log/apache2/)
try this,
http://localhost/CI-example/index.php/control/controlHome
instead of
http://localhost/CI-example/site/index.php/control/controlHome
in your ajax URL.
As from your folder structure, there is no need to include "site" in your URL
I'm working on an ad platform. When someone clicks on an image, I want to send a request back to my server to log this action. I have a pre-generated url for this. If I send a request to this url, it will log the data.
My issue is that the log url is on my domain, whereas the javascript is being executed in a client's domain. Without modifying the logging php script (to add something like Access-Control-Allow-Origin: *), is there a way to send this request to the new domain?
Since I'm only logging data, the server only sends back the text "OK" (which is information I don't need).
You should be able to send Ajax HTTP requests to any domain. I don't see what the problem is... It's the response that is restricted with the Same Origin Policy, not the request itself. You cannot access the response of the PHP script if the domains don't match, but the server will process the request normally, even if it's from a different domain.
This is a hack but it's commonly used. On click append an image to the DOM with the src set to the logging URL. To be friendly, have the output from the logging URL be a 1x1 pixel image. You'll have to pass the parameters via a GET string but it will work.
Create any dynamic DOM element with source on your domain (image or iframe), append a logging data to a request.
var logData = function(data){
if(data === undefined){
return;
}
var img=document.createElement("img");
img.setAttribute('src', 'http://another.domain?'+data);
img.setAttribute('height', '1px');
img.setAttribute('width', '1px');
document.body.appendChild(img);}
Your log requests will now appear in IIS logs
Cross-domain script restrictions are enforced at the browser level as a security precaution, so there is not a simple code fix to work around them. However, you can look at JSONP (JSON with padding) as a starting point.
You could create a hidden iframe with the src attribute set to the logging URL. This is at least as ugly as the image approach listed above.