Axios: Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined

Question

I am getting the title error after running the following function in React:

  const postToApi = (event) => {
    event.preventDefault();
    axios.post(process.env.API_POST_URL, {step : "3"}) 
      // API_POST_URL: http://localhost:4000/api/donate
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  };

My React app is on localhost:3000. Mentioning this because the file causing the error is: isURLSameOrigin.js:51

Don't forget to proxy your requests to the server during development. You can achieve this by adding "proxy": "http://localhost:4000" property to your package.json file. — alegria
Thank you, I have done this and reloaded the page. I get the following error: Access to XMLHttpRequest at 'http://localhost:4000/api/donate' from origin 'http://localhost:3000' 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. — Sean D
Now you have one step closer to the solution. Cross-origin requests are by default blocked in most of the servers. You need to enable cors on your server side. Which app-server/web-server/container do you use for this backend? — alegria
I'm using Express.js, I will look into enabling CORS now, thanks again. — Sean D

Jacob Bralish Jacob Bralish · Accepted Answer · 2018-12-01T21:14:01

Have you recently added the URL to your .env? If so, try stopping your npm/yarn and start it again. Applications compile your .env at the beginning of your dev server. If that does not work have you tried placing the URL directly into it?

Axios: Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined

1 Answers