I'm trying to make an offline map. I'm working with hybrid app and it has a webview that works like a browser and my app is using openlayers.
There is a property url in the object ol.source.osm, can I set a file path, using file protocol just like 'file:///sdcard/Android', in this property?
As far as I know the browser is not allowed to access files from client-side paths or may I'm misunderstandig something?
just to be clear, all the samples that I've seen is setting this property using another way, like localhost but considering that apps does not have a web server it is not possible take this way.
Would someone help me?
Thanks in advance.
Edit
As I said, I try to set "file:///C://somepath//{z}/{x}/{y}.jpeg" in the url property and then I get this error message "Access to Image at 'file:///C://somepath//1/0/1.jpeg' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access."
Is there any workaround?
Related
I made a simple weather app using react. It was working well. But when I hosted it on Github, it gives the error and is not working properly. Do someone know how to resolve this error?
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.
my errors
2nd screenshot
To fix the error you need to make sure that all external resources are all running over HTTPS.
So in this instance, you just need to change the openweathermap.com resource to load from https rather than http. If you leave it as http, then it just won't get loaded and then you'll end up with a ton of js errors as the code wasn't loaded properly.
use https instead of http as the protocol of your base url
I have a react webapp that calls an api (that calls another api using fetch) for image urls and renders the images on the screen through img tags.
The issue I'm having is that the images don't load and instead i get a CORB warning in the console.
Cross-Origin Read Blocking (CORB) blocked cross-origin response
https://website.com
with MIME type text/html. See
https://www.chromestatus.com/feature/5629709824032768 for more
details.
Notice that im having an issue with CORB not CORS A lot of online posts just give the soluton of adding stuff to the headers which may solve CORS issue but i don't believe they solve CORB. In any event, the api i'm using is not mine so i wouldn't be able to add anything server side anyway.
Do i need to add something to my project client side to get this to work? Any ideas would be appreciated.
That happens because the type you requested does not match the data type that is responded from the server. to overcome this try to compare the two. But, if you doesn't have access to target server, You can make a proxy to the destination server. create one more server that will edit the response header from example.com
Example:
Client App => Your proxy server with modified Content-Type header (Ex: http://myproxy.com) => Your destination server (Ex: http://example.com)
Or if you don't want to create a new server and the application is only opened by you personally, you can replace your browser with a version that doesn't yet apply CORBS.
There is no other attempt I know for the client besides that.
I have two React JS applications running on 3000 & 3001 locally and what I am, tring to do is, one application is having public asset (/public) i.e. json file which I can access like,
http://localhost:3000/styles.json
Other React JS application is tring to access it using axios as,
axios.get(`http://localhost:3000/styles.json`)
But I am getting following error in console,
Access to XMLHttpRequest at 'http://localhost:3000/styles.json' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Well this may not be right way but I want to know reason as what can I do to solve it or security violation it is linked with.
Reason I am trying this is, I have accessed one application in another using iframe with passing its own public folder json file path but another application failed to access it.
The CORS (Cross Origin Resource Sharing) error you're seeing is because browsers won't load data from another domain (origin) by default.
In development you could get around this by using something like https://www.npmjs.com/package/corsproxy which basically adds a header like
Access-Control-Allow-Origin: *
to requests proxied through it. In production, you'd need to get whatever server you're using to serve your styles.json asset to do the same: The * stops the browser complaining about it being on a different domain.
I'm using Wamp as my local server while I test my Angular app.
I am using $resource to get some api data from my server but I'm getting a message
XMLHttpRequest cannot load http://myproj.herokuapp.com/api/projects?name=demo.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 401.
I've searched far and wide on the web but I cannot find a working way to get around this.
Any new fresh ideas? Has anyone overcome this issue?
how to allow ACCESS-CONTROL-ALLOW-ORIGIN aka cross-domain on wampserver
This author got it right.
"You have to enable the headers module first, like so :
click on the wamp icon in your systray
go to Apache > Apache modules
check the option 'headers_module'
And then include this in your apache config:
Header set Access-Control-Allow-Origin: *
(in httpd.conf or in the configuration of your vhost)
(Instead of the * you can also specify a specific domain)"
Then bring up your browser, and use localhost/filename to access your files.
I am doing an angular app to upload file directly to s3 storage. The app seems work only with one issue:
When it start to upload, it will send a request with options method first, and it will fail with error as below:
In Chrome: OPTIONS https://{my-domain}.s3.amazonaws.com/ net::ERR_INSECURE_RESPONSE
In Firefox: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://{my-domain}.s3.amazonaws.com/. This can be fixed by moving the resource to the same domain or enabling CORS.
However, when I try visit in browser with https://{my-domain}.s3.amazonaws.com, it will say connection untrust, and if I choose add exception, everythings goes very well.
So, I guess it is to do with the SSL certificate which is for s3.amazonaws.com not for {my-domain}.s3.amazonaws.com. It should not because CORS, otherwise later it should still be problem.
How can I fix it? Need another SSL?
Thanks,
Ron
After days efforts, finally found out it is because I got a dot "." in the bucket name, check this for more details: Amazon S3 - HTTPS/SSL - Is it possible?