Tengo un problema con este 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_FAILEDEstoy tratando de enviar datos pero obtengo un error "CORS"
¿Me estoy perdiendo de algo? Aquí está mi código
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); }No es nada inusual si intenta acceder a proveedores de API de terceros desde su entorno de desarrollo.
Puede probar una fuente antes a través de:
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>'Si recibe el mensaje de CORS, deberá proporcionar un proxy para su entorno local.
Hay una manera bastante fácil hoy en día para las aplicaciones que se basan en CRA y si solo necesita configurar un proxy en desarrollo. Solo necesita proporcionar el proxy necesario en su package.json :
"proxy": "https://theThirdPartyResource",Consulte la documentación: https://create-react-app.dev/docs/proxying-api-requests-in-development/
Para evitar problemas de CORS en su entorno de desarrollo, puede usar un proxy proporcionado por, por ejemplo http-proxy-middleware ( https://www.npmjs.com/package/http-proxy-middleware )
Con él instalado, puede crear un archivo llamado setupProxy.js en su directorio /src como:
const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = (app) => { app.use( '/proxy', createProxyMiddleware({ target: 'https://originalApi.com/api/v1', changeOrigin: true, pathRewrite: { '/proxy': '/', }, }) ); };En su solicitud de axios, podrá utilizar:
axios.get('/proxy/suburl', config) .then((response) => { // what ever you want to do with your response }).catch(error => console.log(error))