from - getjson javascript

No hay encabezado ''Access-Control-Allow-Origin'' presente en el error de recurso solicitado

Question

Estoy tratando de obtener el feed de un sitio web de noticias. Pensé que usaría la API de feed de google para convertir el feed feedburner en json. La siguiente URL devolverá 10 publicaciones del feed, en formato json. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

Usé el siguiente código para obtener el contenido de la URL anterior

$.ajax({
type: "GET",
dataType: "jsonp",
url: "http://ajax.googleapis.com/ajax/services/feed/load",
data: {
"v": "1.0",
"num": "10",
"q": "http://feeds.feedburner.com/mathrubhumi"
},
success: function(result) {
//.....
}
});

pero no funciona y obtengo el siguiente error

XMLHttpRequest no puede cargar http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi . No hay encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. Por lo tanto, el origen '' http: // localhost '' no tiene acceso permitido.

¿Cómo puedo solucionar esto?

Answer 1

Chrome no le permite integrar dos host locales diferentes, es por eso que estamos recibiendo este error. Solo tiene que incluir el paquete Microsoft Visual Studio Web Api Core del administrador nuget y agregar las dos líneas de código en los proyectos de WebApi en su archivo WebApiConfig.cs .

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Entonces todo listo.

Answer 2

Creo que esto podría deberse a que Chrome no admite localhost para pasar por Access-Control-Allow-Origin ; consulte el problema de Chrome

Para que Chrome envíe Access-Control-Allow-Origin en el encabezado, solo alias su localhost en su archivo / etc / hosts a otro dominio, como:

127.0.0.1 localhost yourdomain.com

Luego, si accede a su secuencia de comandos usando yourdomain.com lugar de localhost , la llamada debería tener éxito.

Answer 3

Para el desarrollo puede usar https://cors-anywhere.herokuapp.com , para la producción es mejor configurar su propio proxy

async function read() {
let r= await (await fetch(''https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi'')).json();
console.log(r);
}
read();

Answer 4

Pruebe esto: configure la llamada Ajax configurando el encabezado de la siguiente manera:

var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
url: uri,
beforeSend: function (request) {
request.setRequestHeader("Authorization", "Negotiate");
},
async: true,
success: function (data) {
alert(JSON.stringify(data));
},
error: function (xhr, textStatus, errorMessage) {
alert(errorMessage);
}
});

Luego ejecute su código abriendo Chrome con la siguiente línea de comando:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Answer 5

Si llama al servicio de arranque de primavera. puedes manejarlo usando el siguiente código.

@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS")
.allowedHeaders("*", "Access-Control-Allow-Headers", "origin", "Content-type", "accept", "x-requested-with", "x-requested-by") //What is this for?
.allowCredentials(true);
}
};
}

Answer 6

Si usa el navegador Google Chrome, puede hackear con una extensión.

Puede encontrar una extensión de Chrome que modificará los encabezados de CORS sobre la marcha en su aplicación. Obviamente, esto es solo para Chrome, pero me gusta que funcione con cero cambios en cualquier lugar.

Puede usarlo para depurar su aplicación en una máquina local (si todo funciona en producción).

Aviso : si la URL se rompe, el nombre de la extensión es Access-Control-Allow-Origin: * . Le recomiendo que desactive esta extensión cuando no esté trabajando en sus cosas, porque, por ejemplo, youtube no funciona con esta extensión.

Answer 7

Solo para su información, noté esta información de la documentación de jQuery que creo que se aplica a este problema:

Debido a restricciones de seguridad del navegador, la mayoría de las solicitudes "Ajax" están sujetas a la misma política de origen ; la solicitud no puede recuperar con éxito datos de un dominio, subdominio, puerto o protocolo diferente.

Cambiar el archivo de hosts como @thanix no funcionó para mí, pero la extensión mencionada por @dkruchok resolvió el problema.

Answer 8

Utilice @CrossOrigin en el backendside en el controlador de arranque Spring (ya sea nivel de clase o nivel de método) como la solución para el error de Chrome ''No ''Access-Control-Allow-Origin'' encabezado ''No ''Access-Control-Allow-Origin'' está presente en el recurso solicitado ''.

Esta solución me funciona al 100% ...

Ejemplo: nivel de clase

@CrossOrigin
@Controller
public class UploadController {

----- O -------

Ejemplo: nivel de método

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RequestMapping(value = "/loadAllCars")
@ResponseBody
public List<Car> loadAllCars() {
Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework