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

Estoy intentando obtener el feed de un sitio web de noticias. Pensé que usaría la API de alimentación de Google para convertir la alimentación de 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 recibo 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 ningún encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen ' http: // localhost '.

¿Cómo puedo solucionar esto?

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

Para que Chrome envíe Access-Control-Allow-Originel encabezado, simplemente alias su localhost en su archivo / etc / hosts a algún otro dominio, como:

127.0.0.1   localhost yourdomain.com

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

Si utiliza el navegador Google Chrome, puede piratear con una extensión.

Puede encontrar una extensión de Chrome que modificará los encabezados CORS sobre la marcha en su aplicación. Obviamente, esto es solo para Chrome, pero me gusta que funcione sin cambios en ningún 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: * . Te recomiendo que deshabilites esta extensión cuando no estés trabajando en tus cosas, porque, por ejemplo, youtube no funciona con esta extensión.

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

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 las 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 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.

Chrome no le permite integrar dos localhost diferentes, es por eso que recibimos este error. Solo tiene que incluir el paquete Microsoft Visual Studio Web Api Core de nuget manager y agregar las dos líneas de código en el proyecto WebApi en su WebApiConfig.cs archivo.

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

Entonces todo listo.

Si está llamando 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);
        }
    };
}

Para el desarrollo, puede utilizar 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();

El desbloqueo de cors funciona muy bien para Chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

es un complemento para google chrome llamado "desbloqueo de cors"

Resumen: No más errores CORS al agregar el encabezado 'Access-Control-Allow-Origin: *' a las solicitudes web locales y remotas cuando está habilitado

Esta extensión proporciona control sobre XMLHttpRequest y métodos de recuperación al proporcionar encabezados personalizados "access-control-allow-origin" y "access-control-allow-methods" para cada solicitud que recibe el navegador. Un usuario puede activar y desactivar la extensión desde el botón de la barra de herramientas. Para modificar la forma en que se modifican estos encabezados, utilice los elementos del menú contextual del botón derecho. Puede personalizar qué métodos están permitidos. La opción predeterminada es permitir los métodos 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'OPTIONS', 'PATCH'. También puede pedirle a la extensión que no sobrescriba estos encabezados cuando el servidor ya los llena.

bueno, otra forma es usar cors proxy, solo necesita agregar https://cors-anywhere.herokuapp.com/ antes de su URL. para que su URL sea como https://cors-anywhere.herokuapp.com/http : //ajax.googleapis.com/ajax/services/feed/load .

El servidor proxy recibe http://ajax.googleapis.com/ajax/services/feed/load de la URL anterior. Luego realiza la solicitud para obtener la respuesta de ese servidor. Y finalmente, el proxy aplica el

Access-Control-Allow-Origin: *

a esa respuesta original.

Esta solución es excelente porque funciona tanto en desarrollo como en producción. En resumen, está aprovechando el hecho de que la política del mismo origen solo se implementa en la comunicación de navegador a servidor. ¡Lo que significa que no tiene que aplicarse en la comunicación de servidor a servidor!

Puede leer más sobre la solución aquí en Medium 3 Ways to Fix the CORS Error

Úselo @CrossOriginen el backendsidecontrolador de arranque de Spring (ya sea a nivel de clase o de método) ya que la solución para el 'No 'Access-Control-Allow-Origin'encabezado de error de Chrome 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