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.
Related
I am currently developing a React app. I am currently integrating some APIs, that are already live. However, I run into the issue that cookies are not send by the browser.
I have an endpoint at https://my-domain.com/api/auth/login and https://my-domain.com/api/auth/login/renew
I start my react app npm run start and access it on localhost:3000
I can successfully login via the first endpoint which returns 200 and sets a http-only, secure cookie.
set-cookie: refresh=a.b.c; Path=/api/auth; Domain=my-domain.com; Max-Age=2592000; HttpOnly; Secure
But when requesting the second endpoint, the cookies are not sent. The pre-flight OPTIONS request works fine and I get a 200 back. But the GET request returns a 401 as the cookie is not set.
I have tested this with fetch and axios and set credentials: include (fetch) and withCredential: true (axios).
// fetch
fetch(`${process.env.REACT_APP_BACKEND_BASE_URL}/api/auth/login/renew`, {
method: 'GET',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
})
// axios
const customAxios = applyCaseMiddleware(axios.create({
baseURL: process.env.REACT_APP_BACKEND_BASE_URL,
headers: {
'Content-Type': 'application/json',
},
withCredentials: true,
}));
customAxios.get('/api/auth/login/renew')
I tested on:
Chromium: Version 99.0.4844.51 (Official Build) Arch Linux (64-bit)
Firefox Developer Edition: 99.0b3 (64-bit) for Arch Linux
Edit:
Can be solved by setting same-site attribute of the cookie to none. However, I would prefer a solution where the server can keep its configuration. How are you doing this, are you locally proxying when developing locally?
The server has to set the same site attribute to none:
set-cookie: refresh=a.b.c; Path=/api/auth; Domain=my-domain.com; Max-Age=2592000; HttpOnly; Secure; SameSite=None
However, I don't ĺike this solution. I would rather like a solution where the server does not have to change anything. So different solutions are welcome.
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)});
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 just deployed my application which uses Spring Boot and React on the front end. The Heroku app is working, I can see the page that is suppose to display, and when I make a GET request I get the proper response. But the frontend is not really communicating with the backend like it did when I run both locally. For example, on the front page you should be able to click a button and that sends a POST request to the server.
I am pretty sure I know the only reason for this issue but I do not know how to fix it. There are two spots in the client and one line in the server where I reference https://localhost:8080/request, or some other localhost url. Here are the associated areas in my code.
Client:
await (await fetch('http://localhost:8080/decide', {
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Cache-Control': 'no-cache',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
body: JSON.stringify(body),
})).json();
In my package.json:
"proxy": "http://localhost:8080",
On the backend:
#RestController
public class DecideController {
#CrossOrigin(origins = "http://localhost:3000")
#RequestMapping(value="/decide", method= RequestMethod.POST)
public ResponseEntity<SimpleNode> decide(#RequestBody Decide decide) {
SimpleNode currentNode = decide.getNode();
return new ResponseEntity<SimpleNode>(currentNode, HttpStatus.OK);
}
}
I am just not sure what to replace these references to localhost with. I was thinking I could put the Heroku app's URL there, but then I am not sure what port to use for the client/server or if it would be the same for both. I have struggled to find a decent explanation of what to put there.
Hopefully these instances where I use localhost really is the only issue with it. If you need any more information or clarification let me know.
I have an angularjs application which is consuming a WebAPI created using WCF.
Angularjs application is making call to a WebAPI to fetch client details.
When i run both the projects (angularjs and WCF project) on my local machine. Everything works fine.
After deploying the project on development server I am facing issue while testing my angularjs application in chrome. Chrome fails to load the client details.
I checked the requests made by angularjs application using fiddler. I found that there are two calls made my angularjs application to webAPI, even though in code there is only one call in code,
Following is the code used in angular app
return $http({
method: "GET",
withCredentials: true,
url: $rootScope.models.ServiceURL + "/ServicerClient?clientName=" + searchTextSmallLetters,
dataType: "json",
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
});
First request logged in Fiddler :
GET /PXTRAService.svc/ServicerClient?clientName=volvo HTTP/1.1
First request retunrs following error :
HTTP/1.1 401 Unauthorized
Next request logged in Fiddler has Security section in request header:
GET /PXTRAService.svc/ServicerClient?clientName=volvo HTTP/1.1
Second request retunrs the expected result.
Same scenario is occuring in IE, but IE angular application redeners the fetched results correctly.
Is there any way to fix this issue in chrome?