I'm trying to send a delete and put request to my api through axios.
with post/get everything works well, and when I'm trying to send delete/put with postman, again, everything is fine, so the problem is with the react application.
axios instance:
const api = Axios.create({
baseURL: "http://localhost:8000",
timeout: 1000,
headers: {'Content-Type': 'application/json'}
});
request:
Axios.delete("/",{index:name})
.then((response)=>{console.log(response)})
.catch((err)=>{console.log(err)});
*put is the same, with another data
whenever I deploy these code i'm getting an 404 error in my console and the server doesn't get the requests.
You are not using the axios instance you created with the correct baseURL. Change your request to:
api
.delete("/",{index:name})
.then((response)=>{console.log(response)})
.catch((err)=>{console.log(err)});
Related
I have a website with React hosted on Firebase, with Django for backend running on a server with nginx.
On this website I have a form where the user can upload up to 3 images. On my local PC it works fine, but on the production environment I get this error when I try to upload big files (more than 5mb):
A server/network error occurred. Looks like CORS might be the problem. Sorry about this - we will get it fixed shortly.
Now the thing is that the images get uploaded normally, I can see them when I check the submitted form on the website admin area, but on the frontend, after submitting the form, instead of the success message I get that error.
I have incresed nginx client_max_body_size 15M, but I still get the error.
But given that the images do get uploaded, I think the max body size is not the problem.
I found the problem! It was a very dumb thing, but I didn't notice it before.
Basically I had this
const instance = axios.create({
baseURL: baseURL,
timeout: 5000,
headers: {
Authorization: accessToken
? 'JWT ' + accessToken
: null,
'Content-Type': 'application/json',
accept: 'application/json',
},
});
I set the timeout to 5000ms in axios. I changed it to 30000ms. All good.
I am using react and use axios for making request to the airvisual API. However when I made the request in localhost it returned with a 404 status (I registered to Airvisual and got the key). I read Airvisual documentation and it mentioned using postman to make the request so I download postman and tried it out and the request is now success. I do not understand why it does not succeed in the first place and if I have to use postman for that API call, how do I connect it with my localhost.
Here's the code:
componentDidMount() {
axios
.get(
'api.airvisual.com/v2/countries?key=c441738e-dbc0-4f06-babc-bb126a29c19f'
)
.then((response) => console.log(response));
}
I am sending CORS request as follows:
const axiosConfig = {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
//'crossdomain' : true
// 'Access-Control-Allow-Origin': '*'
}
};
let netAddress=https://some port/
axios.post(netAddress, obj, axiosConfig)
where obj is the data object.
Also, i am running npm start as below for React app
set HTTPS=TRUE&&npm start
The headers accepted by the server are as follows:
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-methods:GET , POST , PUT, PATCH ,DELETE
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:x-paging-pageno,x-paging-pagesize,x-paging-totalpage,
x-pagingtotalrecordcount
I am getting error as follows:
Access to XMLHttpRequest at 'https://10.6.0.7:9022/api/event/Event' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
My localhost as well as server are running on HTTPS. I have tried crossdomain and Access-Control-Allow-Origin, but its not working still
Also, GET requests to the same server is successfull, but POST fails
And, I tried with chrome extensions like CORS unblock, but its failing
Please help
This may not be the answer you are looking for but I had this issue recently trying to POST to an endpoint from my client and was not able to due to CORS. It was a browser issue, not an issue with what the server accepted. You can get this to work by writing a cloud function which does the POST to your endpoint and then call that cloud function from your client. Be aware that you cant make http requests in cloud functions without at least the Blaze plan. Again, sorry if this doesnt help but thought I would share.
I have a client side made with react and my api made with laravel. The problem is when my api run in localhost everything works fine, cookies are set correctly. But when I deploy my api on my vps cookies are not set by axios.
Here is my config.
I don't think this come from CORS because I can send data on my API the only problem is cookies.
export default axios.create({
baseURL: 'http://34.X.X.111/api',
responseType: 'json',
withCredentials: true,
})
You most likely have a problem not having Access-Control-Allow-Origin value set to the domain you want to make the request from.
Try adding this: Acceess-Control-Allow-Origin: http:{yourDomainName}
Hope this helps.
I've developed an AWS function with .net core, it's been deployed to AWS and I can call it from Postman and seems everything's ok, but when I try to call it from a react application with Axios library I get this error:
(index):1 Access to XMLHttpRequest at 'https://awsfunctionurl/api/Organisations' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
here is the code to call the API:
const response: Response = await axios.get(url,{
headers:{
"content-type": "application/json; charset=utf-8",
"Authorization": `Bearer ${accesToken}`
},
})
When I remove Authorization header it starts working!
If you are running the request from a local browser, it will block the pre-flight request by default. There are workarounds for this, depending on the browser. See here, for example, for Chrome.
Alternatively, it may be easier to just add '"Access-Control-Allow-Origin": "*"' in your response headers from the lambda function itself.