Support request - re: Cross Origin

[asimashfaq]

Need help regarding Cors Origin

[alexellis]

Hi @asimashfaq I'm not sure what you are looking for. Please can you explain what the problem is or what you need?

[alexellis]

@austinfrey I'll close this issue in a couple of days if we don't hear from @asimashfaq - but do you have any ideas what this could be about?

[austinfrey]

@alexellis @asimashfaq
the only time I've seen an issue with this is when running the OpenFaaS service on one domain, and making a request to it from the browser on another. I believe you could fix this by running Nginx in front of the gateway and configuring cors settings to allow for cross origin requests. Unsure if that's the question though

[asimashfaq]

@austinfrey got it. I fix that by adding the cors support in the gateway.
@actuino Thanks for the suggesting. I would use this method.
I would be happy if you give support in the gateway and we didnt have to setup Proxy in the Nginx.

[alexellis]

What is your solution / architecture like @asimashfaq ?

It'd be good for us to understand more detail here so we can understand whether we need to make any changes to docs/code.

[asimashfaq]

I am Team Lead at Expanse.org and we are building our backend using openfaas. We are building different products and our api will be publicly available for 3rd Party Websites/App to use. We build the service on openfaas and try to use in different websites it was giving cors-origin error. I want we should able to set cors-origin option while deploying the function in the gateway.

[austinfrey]

@asimashfaq would it be possible to set the cors policy with a reverse proxy like nginx? Or is this something you would want the gateway to handle?

[asimashfaq]

@austinfrey i want the gateway to handle also what options for the SSL in the gateway we have. Right now i made the change in server.go for CORS .and make it work

[austinfrey]

@asimashfaq currently SSL can be implemented with third party API gateways like Kong, Nginx, or Traefik. There is currently a guide detailing Kong instructions here: https://github.com/openfaas/faas/blob/master/guide/kong_integration.md

[asimashfaq]

Yes i know about that. I was just curious if we get this functionality in gateway that would be a great.

[alexellis]

We need a setup we can reproduce the error with. If you can detail it or setup a quick GitHub repo we'll take a look. I would suggest covering your endpoints with Kong or NGinx as a matter of course anyway - you will need that for TLS.

[asimashfaq]

Well openfaas is on machine 192.168.1.20 and i make the request in ReactJS from PC 192.168.1.7.
Request get failed due to cors-origin,
Then i made the change in server.go in gateway folder.Add these 2 lines
c := cors.New(cors.Options{
AllowedOrigins: []string{"*"},
AllowCredentials: true,
})
Bind it to the handler
Handler: c.Handler(r)
and its work

[austinfrey]

I wonder if this is something that could be set as an environment variable?

[asimashfaq]

yes you can

[austinfrey]

@asimashfaq more wondering if that's how OpenFaaS should currently handle something like this, or would it be best to rely on a third party service. What would the Pros/Cons be of making it a native solution vs third party?

[asimashfaq]

Openfaas is not handling something like this right now. There recommend solution is to use the nginx and other stuff to fix the cors origin issue.

[austinfrey]

@asimashfaq I don't believe adding this is a high priority right now. and you're correct, the current recommended solution is to keep using a third party gateway to handle things like auth, cors, and SSL.

[austinfrey]

@asimashfaq i'm going to close this. for the time being CORS can be configured using gateways like Nginx. feel free to keep commenting if you have more input or would like this to be re-opened.

[austinfrey]

Derek close

[masonoise]

I just started doing some work with OpenFaaS and the lack of support for CORS configuration is definitely problematic. My use case is that on my laptop for development I have a front-end (in Vue.js) running on port 8080, and OpenFaaS running in k8s via Docker for Mac. So that means it's listening on port 31112, which makes it impossible for my front-end app to make AJAX calls to it unless I can get CORS headers set. For dev purposes on my laptop setting up an nginx as a gateway doesn't make much sense. I'm trying to figure out how to patch something like server.go as described above, but obviously that's a bad idea. Support for CORS config/env settings would make this really simple. Any thoughts?

[masonoise]

I ended up doing a more crude patch to just make things work, by editing handles/proxy.go in the MakeProxy handler function. At the bottom right before the io.Copy() of the body, I added:

w.Header().Set("Content-Type", "text/html; charset=utf-8")
w.Header().Set("Access-Control-Allow-Origin", "*")

And then did a rebuild and helm remove/update and it works. But obviously patching is not the right way to go. I'm thinking that an entry like accessControlAllowOrigin in the chart gateway.yaml might make sense? Then that could get pulled in. What do you think?

[alexellis]

Hi @masonoise,

How would you run this combination of sites in production? My initial suggestion would be to mirror that in development.

Bypassing CORS is not something I would recommend, but I am willing to look at examples of what other projects are doing if you can find some.

For which routes do you want to bypass CORS? The core API or just function invocation?

[burtonr]

@masonoise, I agree with Alex that we would need to better understand your situation in production so that we can possibly help you set up your development environment to better match that. If you're not having this issue in production, you shouldn't have it in development either (at least in the best scenarios).

I know that there can be times when developing something locally does require the setup to be just enough different that it causes issues like CORS.

@alexellis What do you think about having an environment variable that would hold a list of allowed origins? This is not something that is out of the ordinary for production systems, and would allow people to add localhost:31112 to their local environment.

On the other hand, we haven't seen this issue come up before, so perhaps this is something that can just be fixed with a better development setup.

[kenfdev]

@masonoise Although there are use cases for CORS, imo your's doesn't need CORS.

So that means it's listening on port 31112, which makes it impossible for my front-end app to make AJAX calls to it unless I can get CORS headers set.

If you're using Vue.js and vue-cli to bootstrap your app, you should have a webpack dev server already set up for you. Take advantage of the proxy feature to proxy your request from 8080 -> 31112.
Something like the following config should work. (Change the /api to the path you'd like ajax requests to be proxied to the OpenFaaS gateway)

proxy: {
  "/api": "http://localhost:31112"
}

If that is not the case, as mentioned above, we'll need more context about your situation.

[masonoise]

@kenfdev you had it right. I'm still new to Vue and definitely more of a back-end dev so I had no idea there was built-in support for a proxy like that. That works just fine and is a solid solution for dev environment. This is a side project and is not in production yet, but in that environment I will probably need CORS support of some kind -- the front-end is most likely to be served from something like Cloudfront and the back end will probably be a k8s cluster from an api subdomain. That's how I've done similar apps in the past, and there's not really a good place in which to run a proxy for that setup.

I'm definitely set for now, I got the proxy working and that'll keep me going at the moment. Thanks again.

[affix]

This should not be part of the gateway to be honest.

Bypassing CORS introduces a security risk to the function, developer, service and user. If you need to add a CORS Header you should do so in the function.

If you can't do it in your function use a reverse proxy or gateway such as NginX, HAProxy, Kong or similar that will allow you to send CORS headers.

[tarunmangukiya]

@affix Agree with your comment.

Using it as a reverse proxy will be good idea as a security point of view, plus you won't leak your original faas domain/ip to the user.