CORS Access-Control-Allow-Origin header stripped by watchguard - ajax

I have a website on www.example.com that uses AJAX to access JSON via a nodejs-API on api.example.com. (Cross-domain!) I need the PUT and DELETE as HTTP-methods, thats why I can't use jsonp, i looked up how CORS works, and implemented that via the Access-Control-Allow-Origin headers.
When i work on my local environment (www.example.dev and api.example.dev) my setup works. My API return the correct headers (Access-Control-Allow-Origin) and I succeed in doing cross domain requests.
When I deploy online, my setup doesn't work anymore, because the headers get blocked by the company watchguard firewall. I could ask to allow my public API, but i'm afraid someone else will have the same issues in his or her restricted environment.
Is there any other way to solve this?

For those interested: I use easyXDM for cross domain messaging. That solved my problem. http://easyxdm.net/wp/

Related

How do API work with CORS policies to serve multiple apps

I am creating an API that would serve data to my frontend app. The API is on api.myapp.com and the app on www.myapp.com (same domain, just another subdomain). They communicate with AJAX requests and CORS is all set up, working fine.
But I have another app on another domain (www.myotherapp.com) which partialy uses the same data as myapp, so I was thinking of reusing the API so myotherapp could requests data from it too.
I think it is one use case of API, to be reusable, right?
But then, there is something that I may have missed, because as my API has CORS enabled with "Access-Control-Allow-Origin: www.myapp.com", it won't allow other apps to use its endpoints, right? Their AJAX requests would fail with CORS policies.
So how are public API built and configured? How should I set my API so it can serve several apps (ideally, only the ones I allow)?
Thanks for the explanations :)
There is an Origin header in the request and your API should check if this header is one of the allowed. If it is, then return it as an Access-Control-Allow-Origin header.
If the API is public, it can returns * as Access-Control-Allow-Origin header.

Handle cross domain issue in angular 4 with external API

I am using Postal PIN Code API for getting Post Office(s) details search by Postal PIN Code in angular 5 application. Below is the url of the external API :
http://postalpincode.in/api/pincode/{**PINCODE}**
I am issuing a GET request from the application but it is giving me below error :
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access
Although this request is working perfectly fine from browser and postman. I understand that we need to configure our server with cross-domain policies for accepting cross-domain request but this is an external API and I don't have control over it. How can I resolve this issue?
Thanks in Advance !!
Best: CORS header (requires server changes) CORS (Cross-Origin Resource Sharing) is a way for the server to say “I will accept your request, even though you came from a different origin.” This requires cooperation from the server – so if you can’t modify the server (e.g. if you’re using an external API), this approach won’t work.
Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *). This should solve your problem.
2nd choice: Proxy Server If you can’t modify the server, you can run your own proxy. And this proxy can return the Access-Control-Allow-Origin header if it’s not at the Same Origin as your page.
Instead of sending API requests to some remote server, you’ll make requests to your proxy, which will forward them to the remote server.
Here are a few proxy options.
Ref: https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

How to send the right Access-Control-Allow-Origin value for responses to cross-origin requests with credentials/cookies

I have a setup where a client application is running on a different domain (http://www.example.com) than the server application (http://www.example2.com). I've got the cross domain AJAX requests working except that I cannot figure out a way to send cookies with the request without having to add the Access-Control-Allow-Origin response header for each possible domain. Is there a way to set this up without having to specify a list of domains in that header? I'm aware of the security implications so I guess what I'm really asking is ... is there another framework separate from CORS that I can use which will allow this type of setup and at the same time allow any domain for the client application? I tried JSONP but that did not work out (could not send the cookie with the JSONP request). Is there something else I should try other than CORS and JSONP? Thanks.
EDIT: This is not a duplicate of the question mentioned in the duplicate notification. I'm already aware of the withCredentials flag. The problem is that I don't want to have to specify a list of domains in the CORS response header. I want something equivalent to setting that value to '*', but setting it to '*' is not allowed if sending a cross domain AJAX request that contains cookies.

Is it possible to enable cross domain request using XHR?

I've a server named, foo.com where my application is running and accessing a service available on a different domain bar.foo.com.
With the simple XHR request to bar.foo.com/getUsers, I'm getting an error saying, No 'Access-Control-Allow-Origin' header is present. I do not want to use JSONP as a fallback to cross-domain issue.
Is there any easy fix I can do on server level to enable cross subdomain requests while XHRing?
It appears that I need to set allow-cross-domain headers on server when a response is returned as suggested by #Blender above.
Or I can use xdomain library which uses PostMessage API to enable cors. With this I can even read iframe's content served by different domain.

Cross Domain request for service using SproutCore

I have been trying to get this resolved, without any success.
I have a webapp residing on my domain, say www.myDomain.com. I need to call a service which is present on another domain, say www.anotherDomain.com/service.do?
I'm using SproutCore's SC.Request.getUrl(www.anotherDomain.com/service.do?) to call that service.
I get an error that says, Origin www.myDomain.com is not allowed by access-control-allow-origin.
When I was in dev stages, and using sc-server, the issue was resolved using proxies. Now that I have deployed the app to an actual server, I replaced all the lines where I had set up the proxy with the actual domain name. I have started getting that error again.
The problem is that I CANNOT MAKE ANY CHANGES to the server on the other domain. All the posts that I have come across state that the other server on the other domain ought to provide access-control-allow-origin header and that it ought to support the OPTIONS verb.
My question is, is it possible for me to connect to that service using SproutCore's SC.Request.getUrl() method?
Additionally, the other posts that I have read mentioned that a simple GET request ought not to be preflighted. Why then are my requests going as OPTION instead of GET?
Thanks a ton in advance! :D
This is not a Sproutcore issue; it's a javascript Same Origin Policy issue.
If you can't modify the production server, you have no option but to develop your own proxy server, and have your proxy hit the real service.
This is effectively replacing sc-server in your production environment.
All this server would do is take the incoming request and pass it along to www.anotherDomain.com/?service.do.
You would need to make sure you passed all parameters, cookies, headers, the http verb, etc....
This is far from ideal, because now errors can occur in more places. Did the real service fail? Did the proxy fail? etc.
If you could modify the other domain, you could
1) deploy your SC app there.
2) put in the CORS headers so you could make cross domain requests

Resources