How to solve "Access-Control-Allow-Origin" problem [duplicate]

Question

How to solve "Access-Control-Allow-Origin" problem [duplicate]

Navigation

#1 by (4 votes)

1

I'm not sure how to solve the problem with Access-Control-Allow-Origin . What do I do to work 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

asked by anonymous 20.01.2016 / 16:46

1 answer

Save array to a variable in php [closed] Line break does not work on file

score 4 · Accepted Answer

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

Otherwise, we have other issues, the first is AJAX synchronization, this is rarely a good idea.

a <div> tag does not have a value property, and even if it has it, 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>