0

estoy haciendo una petición http de tipo get en react.js pero como estoy usando información institucional me manda el error del cors que puedo hacer para corregirlo añadi una extension y unos encabezados pero sigue sin funcionar

Ajunto codigo:

       import '../css/boton.css';
       import React from 'react';
       import {base64_encode} from 'base-64';
       var headers = new Headers();
       headers.append("Autorization","Basic == ")
       headers.append("Accept", "application/json");
       headers.append("Content-Type", "application/json");
       headers.append("Access-Control-Allow-Origin", "*");
       var institution = {method:"GET",headers:headers,redirect:'follow'}


       class Boton extends React.Component{
    
  
    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: [] 
        };
        this.handleClick = this.handleClick.bind(this);
      }
      var = base64_encode = {

      
        _keyStr : "+/=",
      
        
        encode : function (input) {
          var output = "";
          var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
          var i = 0;
      
          input = base64_encode._utf8_encode(input);
      
          while (i < input.length) {
      
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);
      
            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;
      
            if (isNaN(chr2)) {
              enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
              enc4 = 64;
            }
      
            output = output +
            this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
            this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
      
          }
      
          return output;
        },
      }
    
     handleClick(){
       
     }
    
      componentDidMount() {
        fetch(``, institution,{mode: 'no-cors'})
        
          .then(res => res.json())
          .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items,
                
              });
              console.log(result);
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
              
            }
          )
      }

    
    render(){
    const { error, isLoaded, items } = this.state;
    return(
        <>
        <button type='submit' onClick={this.handleClcik} 
             className='continuar'>continuar</button> 
    
    {error
      ? <div>Error: {error.message}</div>
      : !isLoaded 
            ? <div>Loading...</div>
            : <ul>
                 {items.map(item => {
                     return <li key={item.id}>
                      {item.name} {item.price}
                     </li>
                 })}
             </ul>}
        </>
     )
        }
      }
         export default Boton

igual ya estuve usando una extensión y agregue unos encabezados pero me sigue mandando el error no se si tenga que agregar otra cosa o que pero ya no se que hacer para resolverlo no le hayo al error y no se como corregirlo adjunto imagen del error aji marca que la url donde quiero hacer la petición ahí es donde marca el error como lo quieto hacer en localhost3000 no se si tenga que poner que imprima la respuesta ahí o como: marca que error esta en la url cómo es institucional la url no se si tenga que agregarla en otro lado

4
  • prueba a ponerle en el fetch mode "cors". Ya que la api es la que te esta bloqueando la petición por la politica de cors. Si ya lo probaste, pues no se
    – Suso
    el 13 jun. 2022 a las 16:03
  • de echo si lo tiene esta como no cors lo ca,bie a cors pero no funciono el 13 jun. 2022 a las 16:21
  • A mi parecer el error es mas del servidor. Según el error se bloqueó la petición porque el servidor no respondió correctamente a la petición de preflight. Lo que indica que el error está del lado del servidor. debes revisarlo allí (si tienes acceso al código del servidor), sino debes hablar con el encargado del servidor.
    – Pipe
    el 13 jun. 2022 a las 18:40
  • ok esta bien gracias el 13 jun. 2022 a las 19:13

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.