2
respostas

Problemas com CORS usando axios React

Quando tento consumir a seguinte API: http://www.receitaws.com.br/v1/cnpj/83325498000190

Utilizando o axios no React, me deparo com o seguinte erro:

Access to XMLHttpRequest at 'http://www.receitaws.com.br/v1/cnpj/83325498000190' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Como eu faço pra resolver esse problema com o CORS utilizando o React e o AXIOS? Segue o codigo:

import React from 'react';
import axios from 'axios';



export default class PegaEmpresa extends React.Component {
  state = {
    empresa: []
  }

  componentDidMount() {
    axios.get('http://www.receitaws.com.br/v1/cnpj/83325498000190')
      .then(res => {
        const empresa = res.data;
        this.setState({ empresa });



      })
  }

  render() {
    return (
      <ul>
        { this.state.empresa.map(empresa => <li>{empresa.name}</li>)}
      </ul>
    )
  }
}

Obrigado! =D

2 respostas

Oi Wendel tudo certo ?

Você pode tentar simluar que a requisição não está sendo feita do localhost usando https://cors-anywhere.herokuapp.com/

axios.get(`https://cors-anywhere.herokuapp.com/http://www.receitaws.com.br/v1/cnpj/83325498000190`)

Espero ter ajudado

Pow Felipe, muito obrigado =D Mais tarde vou testar no meu codigo. Agora me tira uma duvida rápida, por favor.

O certo seria isso aqui né?:

axios.get(`https://cors-anywhere.herokuapp.com//www.receitaws.com.br/v1/cnpj/83325498000190`)

Obrigado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software