2

EDIT: Apperently the mistake (in my third example) was the '?' in http://example.herokuapp.com/api/v1/tickets? After I removed it, it works :)

I am trying to make a post request with axios and when I do it in postman it all works fine, but when I do it in my code, I always get a 500 or 400 back.

In postman my (data is sample data here) my url:

http://example.herokuapp.com/api/v1/tickets?

in my body inside postman:

pin: 123ABC,
ride_id: 24,
token: XXAAXXAAXX

so then in my code I tried everything.

first try: 

return axios.post("http://example.herokuapp.com/api/v1/tickets?pin="123ABC"&ride_id=24&token=XXAAXXAAXX")

Here I get Error: Request failed with status code 400

2nd try:

return axios.post("http://example.herokuapp.com/api/v1/tickets?", {
 params: {
     pin: "123ABC",
     ride_id: 24,
     token: "XXAAXXAAXX"
 }

third try:

return axios.post("http://example.herokuapp.com/api/v1/tickets?", {
  pin: "123ABC",
  ride_id: 24,
  token: "XXAAXXAAXX"
})

Any help would be so much appreciated!!!

javascripting
  • 1,135
  • 4
  • 25
  • 46
  • Is the client-side code that calls `axios.post` hosted on the same heroku server? (btw according to docs, 3rd version is the correct one) –  Jan 14 '19 at 19:45
  • 1
    Possible duplicate of [How to post query parameters with Axios?](https://stackoverflow.com/questions/53501185/how-to-post-query-parameters-with-axios) – zero298 Jan 14 '19 at 19:48
  • @ChrisG I think the 2nd try with a `null` between the URL and Object is the correct way according to this answer: [How to post query parameters with Axios?](https://stackoverflow.com/a/53501339/691711). Otherwise the data is sent as part of the request body instead of query params. – zero298 Jan 14 '19 at 19:49
  • As far as I can tell OP is trying to send POST parameters, not GET ones. 1st try was bad, but POSTMAN test was correct. –  Jan 14 '19 at 19:54
  • @zero298 I actually also tried adding null between the url and the params, with no luck either – javascripting Jan 14 '19 at 20:08
  • are you currently testing the post request from your website locally while hitting your heroku server? – pengcheng95 Jan 14 '19 at 20:23
  • The 3rd way is the correct one. The 2nd argument is the body data, as supposed to be with a POST request. Again: where is the react code hosted? On the same server? What does the server code look like? –  Jan 14 '19 at 20:26

2 Answers2

0

The third way is the correct way to use a post request with axios. Params are associated with get requests.

The reason that your requests are working in Postman but failing on the website could be a CORS error. You can see if it is a CORS error by looking at your network tab and you see that the request that is failing is an OPTIONS request. It should say something along the lines of 

http://localhost:8080 is not allowed by Access-Control-Allow-Origin

To fix this you will need to add some lines of code to your node server. 

var cors = require('cors')
var app = express()

app.use(cors())

You can look more into cors here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors and https://www.npmjs.com/package/cors

pengcheng95
  • 292
  • 4
  • 13
-1

what lang is used in your backend?

if it is php remember that for external requests you must place

header("Access-Control-Allow-Origin: *");
Ram Ghadiyaram
  • 28,239
  • 13
  • 95
  • 121
miguel quevedo
  • 1