0
113
ViewsCómo manejar y redirigir cuando se bloquea por la política CORS en la aplicación React
Tengo una función que recibe un resultado.texto (esta es una cadena de la cámara de escaneo qr, por ejemplo, cadena: 565650). Cuando tengo el resultado, lo guardo en const productString , y luego hago una solicitud de obtención con esa cadena. Si la respuesta es correcta, tengo mi producto y lo agrego a mi bolsa de pago, hasta ese momento todo funciona perfectamente.
Además, cuando escanee un código qr que no sea un producto, lo que significa que mi resultado. El texto no obtendrá una respuesta, quiero redirigir al usuario en una página 404. Además, recibo un error de política de Cors.
Quiero después de mi escaneo, si no tiene éxito, redirigir al usuario en la página 404, mi código está debajo de esa función.
const handleScanResult = (result) => { setLoading(true); setProductString(formatString(result.text)) fetchData(`${API_URL}/products/${formatString(result.text)}`) .then((data) => { handleAddMemo(data); setLoading(false); setOpenAddMemoDialog(true); handleClose(); }) .catch((ex) => { setLoading(false); console.log(ex,"ex") }) };1 answers
Answer question0
Cors es un mecanismo de seguridad del navegador, no puede omitirlo... Bueno, de hecho, puede intentarlo, pero se enfrentará a un problema, consulteIntentar usar el modo fetch and pass in: no-cors
Te recomiendo que sigas las reglas. Así que:
- usted sirve tanto la aplicación como la API en el mismo host + puerto
- pones un proxy como nginx para servir a ambos en el mismo host + puerto
- cambia su API para seguir las reglas necesarias, principalmente encabezados y método de opción.
Hay una buena explicación aquí: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Aquí hay un archivo de configuración simple para Nginx si quiere probarlo
server_name myapp.localhost; listen 80; location /api/myApp { proxy_pass http://127.0.0.1:15000; #Change 15000 to the API port you use } location / { proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_http_version 1.1; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_pass http://127.0.0.1:17050; #Change 17050 to the APP port you use } }