XMLHttpRequest error in flutter web [Enabling CORS AWS API gateway]
this worked for me, I added the below header on the lambda function
return { statusCode: 200, headers: { "Access-Control-Allow-Origin": "*", // Required for CORS support to work "Access-Control-Allow-Credentials": true, // Required for cookies, authorization headers with HTTPS "Access-Control-Allow-Headers": "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale", "Access-Control-Allow-Methods": "POST, OPTIONS"}, body: JSON.stringify(item)};
My server was using nginx so I solved the problem by adding the following two lines to the server block of the sites-enabled config file for my API server:
add_header Access-Control-Allow-Origin "*";add_header Access-Control-Allow-Methods "GET, HEAD";
My app only uses GET
and HEAD
so you may need to add other methods depending on your situation.
See also: How to Enable CORS in Apache and Nginx?
I was using Nodejs for my backend. When I sent a post request from Dio there was this error :"XMLHttpRequest error.".
Reason Behind this error: Suppose your flutter is running at localhost:5500 and nodejs server on localhost:3000. So, your browser fails to handle the request as they are running on different ports. That's we use CORS or Proxies to solve these problems.
Remember, this is a problem mainly associated with your browser. If you will use postman and send the same request, you will find everything working.
To solve this: I installed a NPM Package called CORS.
npm i cors
Then, start using it....
const cors = require("cors");app.use(cors());
By just doing that your error will get resolved. And you don't need to add anything more.