How to solve "Access-Control-Allow-Origin" problem

Asked

Viewed 1,038 times

1

I don’t know how to solve the problem of Access-Control-Allow-Origin. What to do to function properly?

function calc() {
	
	var cepDestino = document.getElementById( 'cepDestino' ).value;
	if(cepDestino.trim() != ""){
		var request = new XMLHttpRequest();
		
		request.open('GET', 'http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep='+cepDestino, true);
		
		request.onload = function() {
			if (request.status >= 200 && request.status < 400) {
				var data = JSON.parse(request.responseText);
				document.getElementById('bairro').value(data.bairro);
				document.getElementById('cidade').value(data.cidade);
				document.getElementById('estado').value(data.estado);
			} else {
				// Não deu certo    
			}
		};
		
		request.onerror = function() {
		  // A conexão nem sequer deu certo
		};
		
		request.send();	
	}
}
<p>
  <label for="cepDestino">CEP Destino</label>
  <input class="input" type="text" name="cepDestino" id="cepDestino" >
  <div id="bairro"></div> - <div id="cidade"></div> - <div id="estado"></div>
</p>

<p>
  <input class="button" type="button" id="calcular" value="Calcular" onclick="calc();">
</p>

javascript

  • @Pedrocamarajunior I am not using jquery. There is nothing to do with my existing problem with this.

  • Sorry, I asked the wrong question: Related duplicate http://answall.com/questions/3183/requisi%C3%A7%C3%A3o-ajax-cross-Domain-with-javascript-neat-without-Apis

1 answer

4


This API has as parameter the return type, to work with CORS and JSON, you must specify formato=jsonp in the request URL.

Otherwise, we have other problems, the first is the synchronous sending of AJAX, rarely this is a good idea.

a tag <div> does not own a property value, and even if it had it is not a method but a property, in any case you should set the textContent of the div.

function calc() {
	
	var cepDestino = document.getElementById( 'cepDestino' ).value;
	if(cepDestino.trim() != ""){
		var request = new XMLHttpRequest();
		
		request.open('GET', 'http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep=' + cepDestino + '&formato=jsonp', false);
		
		request.onreadystatechange = function() {
			if (request.status == 200 && request.readyState == 4) {
				var data = JSON.parse(request.responseText);
				document.getElementById('bairro').textContent = data.bairro;
				document.getElementById('cidade').textContent = data.cidade;
				document.getElementById('estado').textContent = data.estado;
			} else {
				// Não deu certo    
			}
		};
		request.send();	
	}
}
label {
	width: 100%;
	display: inherit;
	font-weight: bold;
	font-size: 3em;
	margin-top: 41px;
}
.input, #descricao {
	width: 100%;
	height: 111px;
	font-weight: bold;
	font-size: 4em;
	text-align: center;
	border-radius: 5px;
	background-color: #ECF0F1;
}
.button {
	width: 100%;
	font-size: xx-large;
	height: 116px;
	background-color: #2CC36B;
	border-radius: 5px;
	margin-top: 76px;
}
<p>
  <label for="cepDestino">CEP Destino</label>
  <input class="input" type="text" name="cepDestino" id="cepDestino" />
  <div id="bairro"></div> - <div id="cidade"></div> - <div id="estado"></div>
</p>

<p>
  <input class="button" type="button" id="calcular" value="Calcular" onclick="calc();">
</p>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.