it-swarm-es.com

¿Por qué mi código JavaScript obtiene un error "No hay encabezado 'Access-Control-Allow-Origin' está presente en el recurso solicitado" cuando Postman no lo hace?

Estoy tratando de hacer una autorización usando JavaScript conectándome a RESTfulAPI incorporado Frasco . Sin embargo, cuando hago la solicitud, aparece el siguiente error:

XMLHttpRequest no se puede cargar http: // myApiUrl/login . No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, el origen 'nulo' no tiene acceso permitido.

Sé que la API o el recurso remoto deben establecer el encabezado, pero ¿por qué funcionó cuando hice la solicitud a través de la extensión Chrome Cartero ?

Este es el código de solicitud:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });
2236
Mr Jedi

Si lo entendí bien, estás haciendo un XMLHttpRequest a un dominio diferente del que está en tu página. Por lo tanto, el navegador lo está bloqueando, ya que generalmente permite una solicitud en el mismo origen por razones de seguridad. Debe hacer algo diferente cuando desee realizar una solicitud de dominio cruzado. Un tutorial sobre cómo lograrlo esUsar CORS.

Cuando está utilizando un cartero, no están restringidos por esta política. Citado deXMLHttpRequest de origen cruzado:

Las páginas web normales pueden usar el objeto XMLHttpRequest para enviar y recibir datos de servidores remotos, pero están limitados por la misma política de Origen. Las extensiones no son tan limitadas. Una extensión puede comunicarse con servidores remotos fuera de su origen, siempre que primero solicite permisos de origen cruzado.

1124

Esta no es una solución para la producción o cuando la aplicación debe mostrarse al cliente, solo es útil cuando UI y Backend desarrollo están en diferentes servidores y en producción están en realidad mismo servidor Por ejemplo: al desarrollar una interfaz de usuario para cualquier aplicación, si es necesario probarlo localmente apuntando a un servidor backend, en ese escenario esta es la solución perfecta.Para la corrección de producción, las cabeceras CORS deben agregarse al servidor de back-end para permitir el acceso de origen cruzado.

La forma más sencilla es simplemente agregar la extensión en google chrome para permitir el acceso mediante CORS.

( https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US )

Simplemente habilite esta extensión siempre que desee permitir el acceso a no 'access-control-allow-Origin' header request.

O  

En Windows, pegue este comando en ejecutar ventana 

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

esto abrirá un nuevo chrome browser que permitirá el acceso a no 'access-control-allow-Origin' solicitud de encabezado.

485
shruti

Si puede lidiar con JSON a cambio, intente usar JSONP (observe laPal final) para hablar entre dominios:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Obtenga más información sobre cómo trabajar con JSONP aquí :

El advenimiento de JSONP, esencialmente un truco de secuencias de comandos consensual entre sitios, ha abierto la puerta a poderosos mashups de contenido. Muchos sitios destacados proporcionan servicios JSONP, lo que le permite acceder a su contenido a través de una API predefinida.

322
Gavin

Es muy fácil de resolver si está utilizando PHP . Simplemente agregue la siguiente secuencia de comandos al comienzo de su PHP página que maneja la solicitud:

<?php header('Access-Control-Allow-Origin: *'); ?>

Advertencia: Esto contiene un problema de seguridad para su archivo PHP que los atacantes podrían invocar. tiene que usar sesiones y cookies para la autenticación para evitar que su archivo/servicio contra este ataque. Su servicio es vulnerable a falsificación de solicitud entre sitios (CSRF).

Si está utilizando Nodo-rojo tiene que permitir CORS en el archivo node-red/settings.js deseleccionando las siguientes líneas:

// The following property can be used to configure cross-Origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 Origin: "*",
 methods: "GET,PUT,POST,DELETE"
},
200
shady sherif

Desearía que alguien haya compartido este sitio conmigo hace mucho tiempo http://cors.io/ habría ahorrado una tonelada de tiempo en comparación con construir y confiar en mi propio proxy. Sin embargo, a medida que pasa a producción, tener su propio proxy es la mejor apuesta ya que aún controla todos los aspectos de sus datos.

Todo lo que necesita:

https://cors.io/?http://HTTP_YOUR_LINK_HERE

168
yoshyosh

Si está utilizando Node.js , inténtelo:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Más información:CORS en ExpressJS

67
Nguyen Tran

Hay un problema de dominio cruzado utilizando Ajax. Debe asegurarse de acceder a sus archivos en la misma ruta http:// sin www. (o acceder desde http://www. y publicar en la misma ruta, incluida www.) que el navegador considera como otro dominio cuando accede a través de una ruta www., para que vea dónde está el problema es. Usted está publicando en un dominio diferente y el navegador bloquea el flujo debido al problema de Origen.

Si API no se coloca en el mismo host desde el que está solicitando, el flujo se bloquea y tendrá que encontrar otra forma de comunicarse con la API.

63
Alin Razvan

Porque 
$ .ajax ({type: "POST" - LlamadasOPCIONES 
$ .post (- LlamadasPUBLICACI&OACUTE;N 

ambas son diferentes Llamadas de Postman "POST" correctamente, pero cuando las llamemos serán "OPCIONES"

Para servicios web c # - webapi  

Agregue el siguiente código en su archivo web.config bajo la etiqueta <system.webServer>. Esto funcionara

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Por favor, asegúrese de no estar cometiendo ningún error en la llamada ajax

jQuery

$.ajax({
    url: 'http://mysite.Microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);    
    },
    error: function () {
        console.log("error");
    }
});

Problema con Angular 4, consulte: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Nota: Si está buscando descargar contenido desde un sitio web de terceros entonces esto no le ayudará . Puedes probar el siguiente código pero no JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.Microsoft.sample.xyz.com/api/mycall");
48
George Livingston

Probar XDomain ,

Resumen: una alternativa de JavaScript CORS/polyfill puro. No se requiere configuración del servidor: solo agregue un proxy.html en el dominio con el que desea comunicarse. Esta biblioteca usa XHook para enlazar todos XHR , por lo que XDomain debería funcionar junto con cualquier biblioteca.

22
user3359786

Si no quieres:

  1. Desactivar la seguridad web en Chrome
  2. Usar jsonp
  3. Utilice un sitio de terceros para reencaminar sus solicitudes

y está seguro de que su servidor tiene CORS habilitado (pruebe CORS aquí: http://www.test-cors.org/ )

Luego, debe pasar el parámetro Origen con su solicitud. Este Origen DEBE coincidir con el Origen que su navegador envía con su solicitud.

Puede verlo en acción aquí: http://www.wikinomad.com/app/detail/Campgrounds/3591

La funcionalidad de edición envía una solicitud GET & POST a un dominio diferente para obtener datos. Establecí el parámetro de Origen que resuelve el problema. El backend es un motor de mediaWiki.

tldr: agregue el parámetro "Origen" a sus llamadas, que debe ser el parámetro Origen que envía su navegador (no puede falsificar el parámetro Origen)

11
Ganesh Krishnan

Tuve un problema con esto cuando usé AngularJS para acceder a mi API. La misma solicitud funcionó en SoapUI 5.0 y ColdFusion. Mi método GET ya tenía el encabezado Access-Control-Allow-Origin.

Descubrí que AngularJS realiza una solicitud de OPCIONES de "prueba" . ColdFusion, de forma predeterminada, genera el método OPCIONES, pero no tiene mucho, específicamente estos encabezados. El error se generó en respuesta a esa llamada de OPCIONES, y no a mi llamada intencional a GET. Después de agregar el método OPCIONES a mi API, el problema se resolvió.

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>
8
Leonid Alzhin

Tuve la siguiente configuración, que resultó en el mismo error, al solicitar respuestas del servidor.

Lado del servidor: SparkJava -> proporciona la API REST
del lado del cliente: ExtJs6 -> proporciona la representación del navegador 

En el lado del servidor tuve que agregar esto a la respuesta: 

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

En el lado del cliente tuve que agregar esto a la solicitud: 

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});
8
kiltek

Basado en la respuesta de shruti , he creado un acceso directo del navegador Chrome con los argumentos necesarios:  enter image description here  enter image description here

8
Mohammad AlBanna

https://github.com/Rob--W/cors-anywhere/ provee (Node.js) el código que puede usar para configurar y ejecutar su propio proxy CORS. Se mantiene activamente y proporciona una serie de funciones para controlar el comportamiento del proxy más allá del simple envío de los encabezados de respuesta correctos Access-Control-*.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS tiene detalles para explicar cómo los navegadores manejan las solicitudes de Origen cruzado que hacen las aplicaciones web del lado del cliente desde JavaScript y qué encabezados debe Configure el envío por el servidor al que se hace la solicitud, si puede.

En el caso de que un sitio del que deba realizar una solicitud y obtener una respuesta de no devuelva el encabezado de respuesta Access-Control-Allow-Origin, los navegadores son siempre irán a bloquear las solicitudes de Origen cruzado que le envíe directamente su cliente código JavaScript de lado de trabajar. Y así, si el sitio no es uno para el que controla y puede configurar el comportamiento, lo único que will work en ese caso es enviar las solicitudes, ya sea a través de su propio proxy, usted mismo o un proxy abierto.

Como se mencionó en otros comentarios aquí, hay buenas razones para no confiar en un proxy abierto con sus solicitudes. Dicho esto, si sabe lo que está haciendo y decide que un proxy abierto funciona para sus necesidades, https://cors-anywhere.herokuapp.com/ es uno que está disponible de manera confiable, se mantiene activamente y se ejecuta una instancia de https://github.com/Rob--W/cors-anywhere/ code.

Al igual que con otros proxies abiertos mencionados aquí (algunos de los cuales al menos ya no parecen estar disponibles), la forma en que funciona es que, en lugar de que su código de cliente envíe una solicitud directamente a, por ejemplo, http://foo.com se lo envíe a https://cors-anywhere.herokuapp.com/http://foo.com y el proxy agrega los encabezados Access-Control-* necesarios a la respuesta que ve el navegador.

7
sideshowbarker

Puede evitar el problema utilizando YQL para enviar la solicitud a través de los servidores de Yahoo. Es sólo unas pocas líneas de código:

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

Aquí está el enlace con una explicación: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

7
camnesia

Si está utilizando Entity Framework , parece que este error a veces se lanzará incluso si tiene habilitada CORS Me di cuenta de que el error ocurrió debido a una finalización faltante de la consulta. Espero que esto ayude a otros en la misma situación.

El siguiente código puede lanzar el error XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource.:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

Para solucionarlo, se requiere una llamada de finalización como .ToList() o .FirstOrDefault() al final de la consulta, así:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}
5
Loyalar

En mi caso, estaba usando la aplicación JEE7 JAX-RS y los siguientes trucos me funcionaron perfectamente:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }
5
Bhuwan Gautam

Si recibe este mensaje de error desde el navegador:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

cuando intente realizar una solicitud Ajax POST/GET a un servidor remoto que está fuera de su control, olvídese de esta sencilla solución:

<?php header('Access-Control-Allow-Origin: *'); ?>

Realmente necesita, especialmente si solo usa JavaScript para realizar la solicitud de Ajax, un proxy interno que toma su consulta y la envía al servidor remoto.

Primero en su código JavaScript, realice una llamada Ajax a su propio servidor, algo como:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async: false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Luego, cree un simple PHP archivo llamado proxy.php para envolver sus POST datos y adjúntelos al servidor remoto de URL como parámetros. Te doy un ejemplo de cómo evito este problema con la API de búsqueda de hoteles de Expedia:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Haciendo:

echo json_encode(file_get_contents($url));

Simplemente estás haciendo la misma consulta, pero en el lado del servidor, después de eso, debería funcionar bien.

Respuesta copiada y pegada desde NizarBsb

4
Flash

Pude resolver con éxito (en mi caso para las fuentes) usando htaccess pero obviamente, OP está preguntando algo diferente. Pero puede usar el patrón de FileMatch y agregar cualquier tipo de extensión para que no le dé un error de cros.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.Apache.org/docs/2.4/mod/core.html#filesmatch

4
Danish

Para la API de GoLang:

Primero, puede consultar MDN CORS Doc para saber qué es CORS. Por lo que sé, CORS trata sobre si se debe permitir que Origin Of Request acceda al recurso de servidor o no.

Y puede restringir a qué solicitud Origin puede acceder al servidor configurando Access-Control-Allow-Origin en Header de Server Response.

Por ejemplo, la configuración del siguiente encabezado en Server Response significa que solo la solicitud enviada desde http://foo.example puede acceder a su servidor:

Access-Control-Allow-Origin: http://foo.example

y siguiendo la solicitud de permiso enviada desde cualquier Origen (o dominio):

Access-Control-Allow-Origin: *

Y como sé en el mensaje de error, requested resource significa recurso del servidor, así que No 'Access-Control-Allow-Origin' header is present on the requested resource. significa que no configuró el encabezado Access-Control-Allow-Origin en su Respuesta del Servidor, o tal vez lo hizo pero el Origen de la solicitud no está en la lista de Access-Control-Allow-Origin, por lo que la solicitud no está permitida acceso:

No hay ningún encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por tanto, no se permite el acceso al origen 'nulo'.

En GoLang, uso el paquete gorilla/mux para construir el servidor de API en localhost:9091, y permito a CORS agregar "Access-Control-Allow-Origin", "*" al encabezado de la respuesta:

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

Y utilizo JavaScript en el cliente, en localhost:9092 make request by Chrome puede obtener "OKOK" del Servidor localhost:9091.

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

Además, puede verificar el encabezado de su solicitud/respuesta con herramientas como Fiddler.

4
yu yang Jian

Pregunta popular: otra cosa que ver si has leído hasta aquí y nada más ha ayudado. Si tiene un CDN como Akamai, Limelight o similar, es posible que desee verificar la clave de caché que tiene para el URI del recurso. Si no incluye el valor del encabezado de Origen, es posible que esté devolviendo una respuesta en caché cuando se solicite desde otro Origen. Acabamos de pasar medio día depurando esto. La configuración de CDN se actualizó para incluir solo el valor de Origen para algunos dominios seleccionados que son nuestros y establecerlo en nulo para todos los demás. Esto parece funcionar y permite que los navegadores de nuestros dominios conocidos vean nuestros recursos. Ciertamente, todas las demás respuestas son requisitos previos para llegar hasta aquí, pero si el CDN es el primer salto desde su navegador, esto es algo para revisar. 

En nuestro caso, pudimos ver algunas solicitudes para llegar a nuestro servicio, pero no casi el volumen que el sitio estaba enviando. Eso nos apuntó a la CDN. Pudimos regresar y ver que la solicitud original fue atendida desde una solicitud directa, que no era parte de una llamada AJAX del navegador y el encabezado de respuesta Access-Control-Allow-Origin no se incluyó. Al parecer, el CDN guardó en caché este valor. La configuración de Akamai CDN Tweak para considerar el valor del encabezado de solicitud de Origen como parte de la coincidencia parece haberlo hecho funcionar para nosotros.

4

Muchas veces esto me pasa de javascript a mi php api, por una de las pocas razones. Me olvido de poner el <?php header('Access-Control-Allow-Origin: *'); ? es uno. Esto es útil para el acceso de subdominio cruzado. Otra razón es que en la solicitud jQuery ajax estoy especificando un tipo de datos específico y devolviendo un tipo de datos diferente, por lo que produce un error. 

El último y más importante razonamiento para este error es que hay un error de análisis en la página que está solicitando. Si presiona la url de la página en su navegador es más que probable que vea un error de análisis y tendrá un número de línea para solucionar el problema. 

Espero que esto ayude a alguien. Cada vez me tomaba un tiempo depurar esto y me gustaría tener una lista de verificación de cosas para verificar.

3
Garrett Tacoronte

En la solicitud jsonp, debe capturar "jsonpCallback" y enviarlo de vuelta.

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

En el backend (si usas como backend PHP)

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

En este caso, la respuesta de fondo parece 

jQuery331009526199802841284_1533646326884 ({"ip": "192.168.1.1"})

pero puedes configurar un "jsonpCallback" manualmente en el frontend y atraparlo en el backend

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

En este caso, la respuesta de fondo parece 

get_ip ({"ip": "192.168.1.1"})

2
Alexey Kolotsey

En mi sitio web (basado en .NET), acabo de agregar esto:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

Muchas gracias a este video.

2
FrenkyB

en caso de que quiera arreglar esto en el backend (en Flask), en lugar de en el extremo frontal, le recomendaría totalmente el paquete de pitón Flask CORS. Frasco Cors

Con una simple línea en su app.py, puede insertar automáticamente el estándar, permitir cualquier encabezado de origen, o personalizarlo según sea necesario.

2
Ben Watts

Para completar, Apache permite cors:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
2
zak

CORS es para ti.

CORS es "Intercambio de recursos de origen cruzado" y es una forma de enviar una solicitud de dominio cruzado. Ahora, XMLHttpRequest2 y Fetch API son compatibles con CORS.

Pero tiene sus límites. El servidor debe especificar específicamente el Access-Control-Allow-Origin , y no se puede establecer en '*'.

Y si desea que cualquier Origen pueda enviarle una solicitud, necesita JSONP (también necesita configurar Access-Control-Allow-Origin , pero puede ser '*').

Si no sabe qué elegir, creo que necesita un componente totalmente funcional para hacerlo. Permítanme presentarles un componente simplecatta


Si está utilizando un navegador moderno (> Internet Explorer9, Chrome, Firefox, Edge, etc.), es muy recomendable que utilice un componente simple pero hermoso,https://github.com/Joker- Jalea/catta. No tiene dependencias, tiene menos de 3 KB y es compatible con Fetch, Ajax y JSONP con la misma sintaxis y opciones simples.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

También admite todo el camino para importar a su proyecto, como el módulo ES6, CommonJS e incluso <script> en HTML.

2
Jelly

La mayoría de estas respuestas les dicen a los usuarios cómo agregar encabezados CORS a un servidor que controlan.

Sin embargo, si necesita datos de un servidor que no controla en una página web, una solución es crear una etiqueta de script en su página, establecer el atributo src en el punto final de la API que no tenga encabezados CORS y luego cargar esos datos. en la página:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);
2
duhaime

Esta solución definitivamente funcionará para usted. Agrega un identificador de mensaje personalizado:

public class CustomHeaderHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        HttpResponseMessage response = await base.SendAsync(request, cancellationToken);
        var referrer = request.Headers.Referrer;
        if (referrer != null && !response.Headers.Contains("Access-Control-Allow-Origin"))
        {
            response.Headers.Add("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
        }
        return response;
    }
}

Registrarse en webapiconfig.cs:

config.MessageHandlers.Add(new CustomHeaderHandler());

Y si está utilizando SignalR, agregue este código en el archivo globle.asax.cs:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    var referrer = Request.UrlReferrer;
    if (Context.Request.Path.Contains("signalr/") && referrer != null)
    {
        Context.Response.AppendHeader("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
    }
}
2
Ujjwal

Recibí este error con $http.get en Angular. Necesitaba usar$http.jsonpen su lugar.

2
Travis Heeter

Tal vez sea un poco complicado, pero puede usar un servidor web para enrutar la solicitud. Con nodejs no tiene este problema. No soy un experto en nodo js. Así que no sé si este es un código limpio. 

Pero esto funciona para mi

Aquí hay un pequeño ejemplo:

NODO JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

JS

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})
1
KT Works

Para el servidor Ruby on Rails en application_controller.rb, agregue esto:

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end
1
张健健

No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Origin ' https://sx.xyz.com ' por lo tanto, no se permite el acceso.

También tuve un problema similar con el intercambio de datos entre dominios en la respuesta Ajax como error undefined . Pero la respuesta en el encabezado fue Código de estado: 200 OK

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

La solución para evitarlo: En mi caso, fue llamar a la función checkapikey () a través de Ajax a otro dominio y obtener la respuesta con datos donde se realizó la llamada:

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_Origin'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_Origin']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}
1
Nishanth ॐ

ParaOpera(funciona igual que Chrome ), inicié el navegador con este comando:

opera --user-data-dir="~/Downloads/opera-session" --disable-web-security

¡El problema esta resuelto! Ahora puedo trabajar en un archivo HTML local (en mi disco duro) y llamar a solicitudes Ajax a orígenes remotos en el mismo archivo.

Nota 1: Puede asignar cualquier carpeta en su directorio de inicio como --user-data-dir.

Nota 2: Probado en Debian 8 (Jessie)/Opera 39

 Here is a screenshot

Cuando se inicia normalmente (sin los parámetros anteriores), la misma solicitud cae en el bloque de código de error.

0
csonuryilmaz

Quizás pueda copiar el recurso desde el servidor de producción al servidor de desarrollo , Y tener la URL del recurso para ajustar dinámicamente. De esa manera, estaría leyendo siempre desde el mismo origen, eliminando la excepción de origen cruzado.

0
bachstein

En mi caso, estaba usando Spring Boot como servicio, puede agregar uso de anotación de origen en la operación responsable:

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value = "getFoo", method = RequestMethod.GET)
public ResponseEntity getFoo(){
    // Do something
} 
0
Chandan Kumar

Creé un puente simple en mi propio dominio que recupera y muestra el contenido de un dominio externo.

<?php
header("Content-Type: text/plain");
if (isset($_GET["cnic"]))
{
    $page = file_get_contents("https://external.domain.com/api/verify/" . $_GET["cnic"]);
    echo $page;
}
else
{
    echo "";
}

?>

Ahora, en lugar de acceder a un dominio externo en AJAX, coloqué la URL de este archivo puente.

Debe ajustar el Content-Type de acuerdo con sus necesidades. Si los datos están en JSON, use header("Content-Type: application/json");

0
Muhammad Saqib

Solo por mencionar otra forma de "evitarlo" - AJAX proxy. Envíe la solicitud a su servidor para obtener los datos de otro Origen y envíe la solicitud a usted.

Prefiero este enfoque a JSONP porque tiene algunos problemas de seguridad potenciales.

0
carobnodrvo

Resolví esto al habilitar CORS para la URL del cliente que accede a la API web y funcionó correctamente.

Por ejemplo:

[EnableCors(origins: "http://clientaccessingapi.com", headers: "*", methods: "*")]
0
Rizwan ali