Hi. I’m building a rest API using Phoenix and a UI using VueJS. I have a signup endpoint in the API that returns 400 error code when requesting using my UI, but it returns 201 when using querying from postman.
But for some reason when I check the browser devtools I see that the content-type is set to application/json for both response headers and request headers. And I don’t know how, my JS logic explicitly sets the header to ‘content-type’: ‘application/json’
Found the answer to my problem here. “application/json” is only a valid content type with CORS.
Now my problem is how to configure CORS in my phoenix api. I’m using cors_plug. But is not working, I’m still getting in my request.
Access to fetch at 'http://localhost:4000/v1/users/signup' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
This is my CORS config in router.ex file
defmodule DumyApiWeb.Router do
use DummyApiWeb, :router
...
pipeline :v1 do
plug CORSPlug, origin: "http://localhost:8080"
plug DummyApiWeb.Version, version: :v1
end
...
scope "/v1", DummyApiWeb do
pipe_through :v1
post "/users/signup", UserController, :create
post "/users/signin", UserController, :signin
end
...
end
I would recommend you to understand the mechanics of pre-flight request, aka the one that is done with OPTIONS, and then followed by the real GET, POST, PUT or DELETE request.
A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood.
A preflight request is automatically issued by a browser, when needed. In normal cases, front-end developers don’t need to craft such requests themselves.
Almost every developer has faced with CORS trouble, but if you haven’t. CORS is just a http mechanism that uses specific headers to grant permission to other domains get some of your data. So imagine that you have a REST API with the domain www.outsiderhost:4000 and you have your SPA hosted in www.localhost:3000. As you see they are not the same domain, so you have to grant access permission to www.localhost:3000 to get the data from www.outsiderhost:4000 .