I have a problem with this error:
Access to XMLHttpRequest at 'https://...' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
POST https://... net::ERR_FAILEDI am trying to send data but getting a "CORS" error
Am I missing something? Here is my code
var dataBlob = File;
const submit = async () => {
//Convert Blob URL to file object with axios
const config = { responseType: "blob" };
await axios.get(mediaBlobUrl, config).then((response) => {
dataBlob = new File([response.data], "record", { type: "media" });
});
let formdata = new FormData();
formdata.append("sequence", "L");
formdata.append("video", dataBlob);
console.log("data", dataBlob);
//POST
try {
console.log(formdata.getAll);
let result = await axios({
url: "https://abc...",
method: "POST",
data: formdata,
});
console.log(result.data);
} catch (err) {
console.log(err);
}It's nothing unusual at all if you try to access 3rd party api providers from your development environment.
You can test a source a prior via:
curl -i -X OPTIONS source/of/your/desire/ping \\ -H 'Access-Control-Request-Method: GET' \\ -H 'Access-Control-Request-Headers: Content-Type, Accept' \\ -H 'Origin: <http://localhost:3000>'
If you'll get back the CORS message, you will need to provide a proxy for your local env.
There is a quite easy way nowadays for apps that are based on CRA and if you only need to setup one proxy in development. You just need to provide the needed proxy in your package.json:
"proxy": "https://theThirdPartyResource",
See documentation: https://create-react-app.dev/docs/proxying-api-requests-in-development/
To avoid CORS issues in your dev environment you can use a proxy provided by e.g. http-proxy-middleware (https://www.npmjs.com/package/http-proxy-middleware)
With it installed you can create a file named setupProxy.js in your /src directory like:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
app.use(
'/proxy',
createProxyMiddleware({
target: 'https://originalApi.com/api/v1',
changeOrigin: true,
pathRewrite: {
'/proxy': '/',
},
})
);
};
In your axios request, you will be able to use:
axios.get('/proxy/suburl', config)
.then((response) => {
// what ever you want to do with your response
}).catch(error => console.log(error))