crisefd
Querying Elixir API from a UI
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.
This works:
curl 'http://localhost:4000/v1/users/signup' -H 'Content-Type: application/json' --data-binary '{"user":{"email":"dummy@example.com","username":"dummy@example.com","password":"password123456"}}'
And it fails when the UI issues the requests:
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’
Marked As Solved
Exadra37
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.
It is an
OPTIONSrequest, using three HTTP request headers:Access-Control-Request-Method,Access-Control-Request-Headers, and theOriginheader.
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.
Now that you are familiar with a pre-fligth request you can follow the article How to Configure CORS on your Phoenix Application to learn how to do them.
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:4000and you have your SPA hosted inwww.localhost:3000. As you see they are not the same domain, so you have to grant access permission towww.localhost:3000to get the data fromwww.outsiderhost:4000.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #javascript
- #podcasts
- #code-sync
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"