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..
Related
Im trying to run a website with socket.io Vue-Socket.io and want to enable DDOS protection from cloudflare. As I know cloudflare supports websocket-servers such as socket.io.
After I enabled cloudflare successfully and changed the ports of my socket-connection, the google dev console tells me:
Failed to load http://my-domain.com:2083/socket.io/?EIO=3&transport=polling&t=M9uD7PJ: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://my-domain.com.com' is therefore not allowed access. The response had HTTP status code 400.
Someone can tell me what I have to change?
PS: Im working with the vuejs-cli
This is a CORS issue.
In your socket.io server, add the configuration to enable CORS: server.origin().
In your case:
io.set('origins', 'http://my-domain.com:2083');
Again this is a server-side issue, it is just being reflected in Vue. But there's nothing Vue (or the client-side) can do about it.
I played around with some of the examples of #acdcjunior and found a solution finally.
On my server I implemented:
io.set('origins', 'http://my-domain.com:*');
For the clients I connect to the socket server:
export const SocketInstance = socketio('my-domain.com:2082');
don't ask me why, but I tried and tried around for about 7 Hours.. love programming :)
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.)
My meteor app has so far lived "unsecured" - meaning no redirection to https:// by default. This has worked fine in conjunction with the accounts-facebook package, which creates its own SSL enabled connection to Facebook when doing its OAuth magic.
My problems started when I tried acessing my site using https instead of http. The pop-up window the accounts package opens to log into facebook halts quickly and by reading its console output I can see the following message
Uncaught SecurityError: Blocked a frame with origin "http://wishlist-foobar.meteor.com" from accessing a frame with origin "https://wishlist-foobar.meteor.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
I thought this might have something to do with the site url in the app's facebook settings, but changing the http to https in that setting got me nowhere. Still got the same message. How is this supposed to work? I am not hardcoding the http part of the path anywhere except the facebook settings, so this seems to be something the accounts-facebook package is doing.
This is my app settings on Facebook. Observe the non-SSL site url.
It turns out you need to set the ROOT_URL environment variable for the callbacks to work and make sure visitors hit that url (for instance, forcing ssl). See these SO answers for more background info.
Google OAuth login in http server
Why is ROOT_URL a required environment variable for bundle deployment?
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
I have a php script that run perfectly when requested by the browser (example):
http://www.kwiksher.com/k3Serial.php?key="XXXXX"
in this case, I get the information of an user with the key XXXXX, which is the expected behavior.
However, inside my Photoshop plugin, I must to call it via socket, having to force a port in the connection:
http://www.kwiksher.com:80/k3Serial.php?key="XXXXX"
Doing that, I get the the content of Azure default 404 page (it is not even my customized 404 page).
If I use the same call (with the port added to the domain) on a browser, it works fine as well.
Any idea on how to fix it? I tried to flushDNS on my machine as well without success.
Thanks a lot,
Alex
It's likely that the socket library won't be using HTTP and therefore isn't sending a host header and the web tier on Azure can't actually figure out which Website it should serve the content from.
As you using this with a plug-in perhaps try and use the default hostname issued by Azure instead of a custom domain.