I have a React JS application where I send a GET request with axios. In the browser, in the Response Headers section, when I send the request I get Content-Disposition: attachment;filename="image123.pdf", but when I try to get this in React, I don't get any field with this name. So when I try to access the response.headers['content-disposition'], I don't get anything.
Is it possible to read this header key using React JS using axios?
Related
I set a react webpage that has is structured as follow:
MAIN PAGE www.localhost:3000.com,
OTHER PAGES www.localhost:3000.com/services, www.localhost:3000.com/about, www.localhost:3000.com/contactMe.
I'm using axios from www.localhost:3000.com/contactMe to perform a post for a contact form that will send data thru my backend/nodemailer.
Using Postman to verify the post status, the post method is NOT working from www.localhost:3000.com/contactMe/api/contact and it works correctly for localhost:3000/api/contact and localhost:5000/api/contact.
How could I fix this Request failed with status code 404 from www.localhost:3000.com/contactMe/api/contact?
HOST: localhost:3000
SERVER: app.use('/api,...)
CONTROLLER: pouter.post('/contact',...)
One solution could be to just use the base URL and send the POST request to www.localhost:3000.com/api/contact from any page.
So even if the user is on www.localhost:3000.com/contactMe, it still sends the request to www.localhost:3000.com/api/contact.
A quick way to get it is using window.location.hostname.
Another way is just putting a / in the beginning of the URL you're putting in your POST request axios.post('/api/contact', ...) and it should send it directly to ${baseURL}/api/contact from any page
I am developing a Server-side rendering app using Express, NextJS and React and for API calls I am using Axios. I am developing it using Typescript. So using Axios with Typescript. I have a requirement where I have to append some headers in my SSR page response (ctx.res) based on some API response. I am able to achieve this and is able to set headers received from one API to my final SSR page. Though there is one issue I am facing which is related to the combination of cache-control header.
The actual API response I get from wget --save-headers <endpoint> is :
Cache-Control: public,max-age=3600
Cache-Control: s-maxage=34871
I have 2 cache-control keys in separate lines and I want it to be appended same way in my SSR page response header.
When I do console of response.headers just after the API call (via Axios) my same header is printed as below and so in my SSR page response, only one cache-control header is appending.
'cache-control': 'public,max-age=3600, s-maxage=34871'
I am not sure where this combination of cache-control header is taking place. How I can resolve this so that I am able to send my headers same way I received from the API (When I did wget).
Is it Axios combining the headers?
I created a simple REST API with express and bodyParser which returns a json object on a GET request to the base url. Works fine in the browser and returns what's expected:
API Endpoint: https://jk9j0.sse.codesandbox.io/.
Code: https://codesandbox.io/s/magical-montalcini-jk9j0
Then I setup a basic react app to consume this API by sending a GET request with axios. But on calling the API endpoint above, I get no response. Trying to catch the error.request object, I don't see anything that's clearly incorrect in the headers. The error object itself says 'Network Error'. Not sure why, when the API works as expected in a browser.
Note: When I replace my API url with another one, which is expected to send a similar response, things work great.
The one that works: https://jsonplaceholder.typicode.com/posts/
I haven't created that one, but used it to model my json object.
React Code: https://codesandbox.io/s/hungry-sun-rq94r
I've tried investigating from several angles but no luck. What am I missing here? Do I need to set some headers in the request? Is this a CORS issue?
Yes, it turned out to be a CORS issue. Had to apply header in the API end-point before sending response. res.header("Access-Control-Allow-Origin", "*").
I have a route that needs a token. When I make my Axios call inside of the react app, it returns 401. However, when I grab the parsed header inside of the Network tab it shows:
Bearer ${correctToken}
I grab that entire string, Bearer ${token} and throw it into PostMan and I get the correct object, no 401.
I have tried all the fixes and am now on page 3 of google, the dark abyss.
Any idea how to fix this?
I am using Angular v1.2.15 to GET a URL to retrieve JSON results.
I need to send a custom AUTHENTICATION Header with the request.
the url will send back Json.
So far I can only get both $resource and $http to even send the request
if I use JSONP type of request. However when I do this it does not send
my CUSTOM HEADER. Can I retrieve JSON content using a normal GET request?
The problem was the Ripple Emulator for Cordova apps was running the proxy on a different port. The the emulator was actually not allowing the http request.