Disble Access-Control-Allow-Origin

[sen]

How can i disable Access-Control-Allow-Origin in my elixir phoenix project?
Thanks

[kokolegorille]

You might use

GitHub - whatyouhide/corsica: Elixir library for dealing with CORS requests. 🏖

[easco]

For completenes along with @kokolegorille’s response, you can also look at CORSPlug:

cors_plug

I prefer the documentation in Corsica though.

[sen]

For example, where i need to add this?
add in endpoint.ex or other file?
Thanks

plug CORSPlug, origin: [“http://example1.com”, “http://example2.com”]
or
plug CORSPlug, origin: ~r/https?.*example\d?.com$/

[NobbZ]

@sen

For example, where i need to add this?
add in endpoint.ex or other file?

It depends…

Do you want to apply those rules globally or only in certain pipeline like :api? If globally, yes, the endpoint.ex should be the file to go, if the later its whatever file you use to define your pipelines (usually the routes file).

But both is already explained in the documentation:

https://hexdocs.pm/cors_plug/readme.html#content

[sen]

anyone know how to solve this problem?
I set the command in endpoint.ex.
plug CORSPlug, origin: [“http://example1.com”, “http://example2.com”]
but check header response show origin null,
access-control-allow-origin →null

[NobbZ]

How do you check?

Can you create a minified project and release it on github, which includes step necessary to recreate your problem and also explaing what you would expect to see instead?

[santif]

What value are you sending in Origin header?

[sen]

I use postman to check.(url: http://localhost:4000)
And create a new project and add the tutorial part.

testing project: https://github.com/Kseng/phoenix_test.git

Add this plug to mix.exs
{:cors_plug, “~> 1.5”},
and
Add this code to endpoint.ex
plug CORSPlug, origin: [“http://localhost:4000”, “http://localhost:4111”]

I hope to get this result, but current get origin null.
access-control-allow-credentials →true
access-control-allow-origin → http://localhost:4000,http://localhost:4111

[NobbZ]

As your code missed the part to check for the values, I did it myself and it seems to work for me:

curl -H "origin: http://localhost:4000" localhost:4211 
[{"cache-control", "max-age=0, private, must-revalidate"}, {"vary", "Origin"}, {"access-control-allow-origin", "http://localhost:4000"}, {"access-control-expose-headers", ""}, {"access-control-allow-credentials", "true"}, {"x-frame-options", "SAMEORIGIN"}, {"x-xss-protection", "1; mode=block"}, {"x-content-type-options", "nosniff"}, {"x-download-options", "noopen"}, {"x-permitted-cross-domain-policies", "none"}]

git diff lib/crosproject_web/controllers/page_controller.ex 
diff --git a/lib/crosproject_web/controllers/page_controller.ex b/lib/crosproject_web/controllers/page_controller.ex
index 546c3c2..7cfaddc 100644
--- a/lib/crosproject_web/controllers/page_controller.ex
+++ b/lib/crosproject_web/controllers/page_controller.ex
@@ -2,6 +2,7 @@ defmodule CrosprojectWeb.PageController do
   use CrosprojectWeb, :controller
 
   def index(conn, _params) do
-    render conn, "index.html"
+    acao = inspect(conn.resp_headers)
+    text(conn, acao)
   end
 end

PS: you really should not put _build and deps under version controll…

[sen]

Hi NobbZ, Thanks for help.

1. This command also same work for me.
   curl -H “origin: http://localhost:4000” localhost:4211

Output:
[{“cache-control”, “max-age=0, private, must-revalidate”}, {“vary”, “Origin”}, {“access-control-allow-origin”, “http://localhost:4000”}, {“access-control-expose-headers”, “”}, {“access-control-allow-credentials”, “true”}, {“x-frame-options”, “SAMEORIGIN”}, {“x-xss-protection”, “1; mode=block”}, {“x-content-type-options”, “nosniff”}, {“x-download-options”, “noopen”}, {“x-permitted-cross-domain-policies”, “none”}]

2. Add that code to my index and get result.

acao = inspect(conn.resp_headers)
text(conn, acao)

Output:
[{“cache-control”, “max-age=0, private, must-revalidate”}, {“vary”, “Origin”}, {“access-control-allow-origin”, “null”}, {“access-control-expose-headers”, “”}, {“access-control-allow-credentials”, “true”}, {“x-frame-options”, “SAMEORIGIN”}, {“x-xss-protection”, “1; mode=block”}, {“x-content-type-options”, “nosniff”}, {“x-download-options”, “noopen”}, {“x-permitted-cross-domain-policies”, “none”}]

3. Using javascript to test, get this error message.
   Failed to load http://localhost:4211/: The ‘Access-Control-Allow-Origin’ header has a value ‘null’ that is not equal to the supplied origin. Origin ‘https://localhost:4000’ is therefore not allowed access.

[NobbZ]

Since curl with explicitely set headers works, I have to assume that your client does not set the correct headers when initiating the request.

[sen]

OK. Thanks for help. I using postman and add header Origin:http://localhost:4000, It’s working now.

[sen]

Hi all, How to setting cors just allow api only? I am using CORS plug
Thanks.

[pedromvieira]

You need to set up your CORS plug in router.ex or use a reverse proxy like NGINX.

router.ex

...
  pipeline :public_api do
    plug CORSPlug, origin: "*"
    plug :accepts, ["json"]
  end
...
  scope "/public/v1", MyAppWeb, as: "public" do
    pipe_through [:public_api, :public_api_v1_session]
    scope "/temp" do
      get "/", PublicAPI.V1.TempController, :webhook
      post "/", PublicAPI.V1.TempController, :webhook
    end
  end
...

NGINX

server {
	...
	location /api {
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		proxy_pass http://backend-api;
	}
	...
}

[sen]

HI @pedromvieira ,
Thanks for help.
If i set cors in my route,then no need set in endpoint?

[pedromvieira]

Yes. Your router / plug applies to all scope that uses that pipeline. You can set multiple scope with different pipelines and plug options.

[sen]

OK.That great,I will try it.
Thanks

[philipwids]

Basically, using ajax with local resources doesn’t work.

Chrome and Safari has a restriction on using ajax with local resources. This error means that you are trying to perform Ajax on a local file. This is forbidden for security reasons.

In order to solve this problem, you can use firefox or upload your data to a temporary server. If you still want to use Chrome, start it with the below option;

--allow-file-access-from-files

Also, this kind of trouble is now partially solved simply by using the following jQuery instruction:

<script> 
    $.support.cors = true;
</script>