I am using CodeIgniter REST API with Angular frontend.
I tried to fetch and post data with REST API, but CORS error occurs in console, and I installed chrome CORS extension and enabled to solve the problem.
When I moved files to the remote host, same error occurs again.
Files hosted on a different server than the REST API.
for example:
frontend: http://frontend.com
RestApi: http://ipaddress.com
I tried to enable the CORS in .htaccess and HTTP headers through PHP, to no avail.
Related
StackOverflow Community,
I have a problem that someone may have solved before, but I find it truly confounding.I'm running a flutter web server on a vm in Azure with
flutter run --release -d web-server --web-port 8081
After getting CORS error attempting to hit Maps or Places API, I elected to run another instance of NGROK with the --host-header=rewrite flag, as I have done for other APIs to avoid this CORS error. This works fine with all of the other APIs we are hitting.
However, when serving this app, I still get a very similar CORS error, identifying items hidden:
Access to XMLHttpRequest at 'https://hidden1.ngrok.io/maps/api/place/autocomplete/json?input=s&key=hidden&sessiontoken=hidden' from origin 'https://hidden2.ngrok.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.Hidden1 is my maps API redirect and Hidden2 is my app's dev redirect.
Am I still getting this error because I somehow need to serve place autocomplete, in this case, from the same subdomain as the app's subdomain?? I'm confused, because this is not a constraint of any other APIs I remember using in the past.
I still get a 200 response with this CORS error, but chrome refuses to do anything with it unless I use a CORS-enabling extension.
If I do need to redirect Places and the app's Web Server through the same URL, are there any recommendations for doing this?
Thanks in advance for your time and thoughts..
I am trying to fetch the metadata I stored on NFT.storage using axios, but each time I get this error:
Access to XMLHttpRequest at 'ipfs://bafyreib6hf354pwtnwxdmfllegogffvkv2dzsrgbithvjbzzewu757bxay/metadata.json' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
I have solved this issue many times when I used to do web2 development but don't know how to do this here.
You cannot directly access ipfs:// prefixed content from a normal browser or js. Instead, you'd have to access it through a gateway.
Some popular gateways are ipfs.io, pinata, moralis..
This is an example usage of an ipfs gateway:
https://ipfs.io/ipfs/bafyreib6hf354pwtnwxdmfllegogffvkv2dzsrgbithvjbzzewu757bxay/metadata.json
Try making your axios request to this url
I developped an application NUXTJS with a backend in Symfony. I deploy an API REST that allows me to talk beetween front and back. Everything work in local.
I want to deploy this on my host.
So I created two subdomains : one for my front and one for my backend.
So when I try to access to my application, I try to connect but I have these two errors CORS :
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mysubdomain.domain.fr/api/login_check. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
And
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mysubdomain.domain.fr/api/login_check. (Reason: CORS request did not succeed).
How can I fix this ?
Thanks a lot
You need to enable CORS by specifying the nextjs domain, not the api domain. If you want to be sure you can also allow all domain by using a *. But this reduces security a bit.
If you really want to be secure, you could add a proxy to your nextjs server, which proxies to your Symfony application. For example, in your NextJS application, proxy /api to the Symfony application hostname.
This way you don't need to enable CORS at all.
If you use Api Platform you may need to configure the CORS_ALLOW_ORIGIN variable in your .env file 😁
I have my Angular front-end set up to try and hit a RESTful endpoint. The Angular front-end is being served on localhost:3000, and the RESTful back-end is being hosted on localhost:8080.
In my Angular rest client service, I make the call (which I subscribe to elsewhere in my application):
getCurrentSlides(): Observable<Slide[]> {
return this.http.get("localhost:8080/app/slides")
.map(extractData)
.catch(handleError);
}
But when Angular tries to hit that URL, I get the following error:
XMLHttpRequest cannot load localhost:8080/app/slides. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
And yes, CORS is enabled on my server.
this.http.get("localhost:8080/app/slides")
You're missing the http:// in the URL. With that, most browsers will still require CORS for the different ports, but IE does not, so when adding http:// you should be able to test using IE:
IE Exceptions
Internet Explorer has two major exceptions when it comes to same origin policy
Trust Zones: if both domains are in highly trusted zone e.g, corporate domains, then the same origin limitations are not applied
Port: IE doesn't include port into Same Origin components, therefore http://company.com:81/index.html and http://company.com/index.html are considered from same origin and no restrictions are applied.
These exceptions are non-standard and not supported in any other browser but would be helpful if developing an app for Windows RT (or) IE based web application.
That said, you should enable CORS. (But it seems you did, so then it's just the missing http:// prefix.)
I created a simple vanilla ToDo from azure mobile template to test the service but don't seem to work correctly. I can connect to https://phonegapwil.azure-mobile.net from localhost with mobile services but not after I published site, http://phonegapwil.azurewebsites.net/
error message I get:
XMLHttpRequest cannot load https://phonegapwil.azure-mobile.net/tables/todoitem?$filter=(complete%20eq%20false). No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://phonegapwil.azurewebsites.net' is therefore not allowed access. The response had HTTP status code 400.
I also tried "*" for the CORS but no go.
Any ideas? Thanks
Thanks for your reply #phillipv. I used "*" but still didn't work. I used .net as my mobile service back-end and that was the problem. Seems like they have a bug. I recreated this using node back-end and worked without an issue.
come on Microsoft
I saw a nuget fix here
cors not working with azure mobile service .net backend