Pregunta ¿Por qué mi JavaScript obtiene un error "No 'Access-Control-Allow-Origin' en el recurso solicitado" cuando Postman no lo hace?


Estoy tratando de hacer una autorización usando JavaScript conectándose a la Sosegado  API construido en Matraz. Sin embargo, cuando realizo la solicitud, aparece el siguiente error:

XMLHttpRequest no se puede cargar http: // myApiUrl / login. Ningún encabezado 'Access-Control-Allow-Origin' está presente en el recurso solicitado. Por lo tanto, el origen 'nulo' no está 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 de 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);
    });

1859
2017-11-17 19:29


origen


Respuestas:


Si entendí bien, estás haciendo un XMLHttpRequest a un dominio diferente al de su página. Entonces, el navegador lo está bloqueando, ya que generalmente permite una solicitud en el mismo origen por razones de seguridad. Debe hacer algo diferente cuando quiera hacer una solicitud entre dominios. Un tutorial sobre cómo lograr eso es Usando CORS.

Cuando usa cartero, esta política no lo restringe. Citado de Cross-Origin XMLHttpRequest:

Las páginas web normales pueden usar el objeto XMLHttpRequest para enviar y recibir datos desde servidores remotos, pero están limitadas 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.


998
2017-11-17 19:49



Esto no es una solución para la producción o cuando la aplicación tiene que mostrarse al cliente, esto solo es útil cuando la interfaz de usuario y el backend desarrollo  están en diferentes servidores y en producción están en realidad en el mismo servidor. Por ejemplo: al desarrollar la interfaz de usuario para cualquier aplicación si existe la necesidad de probarla localmente, apuntarla al servidor back-end, en ese escenario esta es la solución perfecta. Para el arreglo de producción, los encabezados CORS deben agregarse al servidor back-end para permitir el acceso cruzado de origen.

La manera más fácil es simplemente agregar la extensión en google chrome para permitir el acceso usando CORS.

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

Simplemente active esta extensión cuando lo desee para permitir el acceso a ningún 'access-control-allow-origin' solicitud de encabezado

O 

En Windows, pega este comando en correr ventana

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

esto abrirá un nuevo cromo navegador que permite el acceso a ningún 'access-control-allow-origin' solicitud de encabezado


451
2018-03-04 06:42



Si puedes lidiar con JSON a cambio, intenta usar JSONP (nota la PAG al 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 hack de secuencias de comandos entre sitios consensual, ha abierto la puerta a poderosos mashups de contenido. Muchos sitios prominentes proporcionan servicios JSONP, lo que le permite acceder a su contenido a través de una API predefinida.


311
2018-02-22 00:42



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

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

Advertencia: Esto contiene un problema de seguridad para su archivo PHP que podría ser llamado por los atacantes. tiene que usar sesiones y cookies para la autenticación para evitar su archivo / servicio contra este ataque. Tu servicio es vulnerable a solicitud de falsificación a través del sitio (CSRF).

Si estás usando Node-red tienes que permitir CORS en el node-red/settings.js archivo al dejar de comentar 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"
},

186
2017-12-03 20:24



Deseo 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 avanza hacia la producción, tener su propio proxy es la mejor opción ya que aún controla todos los aspectos de sus datos.

Todo lo que necesita:

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


142
2017-07-21 22:08



Hay un problema entre dominios usando Ajax. Debe estar seguro de que está accediendo a sus archivos en el mismo http:// camino sin www. (o acceso desde http://www. y publicar en el mismo camino incluyendo www.) que el navegador considera como otro dominio al acceder a través de un www. camino, para que veas dónde está el problema Está publicando en un dominio diferente y el navegador bloquea el flujo debido al problema de origen.

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


61
2018-03-12 08:53



Si estás usando Node.js, intentalo:

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


55
2018-02-12 16:27



Porque
$ .ajax ({tipo: "POST")  - Llamadas OPCIONES 
$ .post ( - Llamadas ENVIAR 

ambos son diferentes llamadas de Postman "POST" correctamente, pero cuando lo llamemos será "OPCIONES"

Para servicios web c # - webapi 

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

<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 angular 4, consulte: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Nota: Si buscas descargar contenido desde el sitio web de un tercero entonces esto no te ayudará. Puede 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");

41
2017-12-13 13:02



Tratar XDomain,

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


22
2018-04-01 07:46



Si no quieres:

  1. Deshabilitar la seguridad web en Chrome
  2. Use JSONP
  3. Use un sitio de terceros para redirigir sus solicitudes

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

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

Puedes verlo en acción aqui: http://www.wikibackpacker.com/app/detail/Campgrounds/3591

La funcionalidad de edición envía una solicitud GET & POST a un dominio diferente para buscar 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 de origen que envía su navegador (no puede falsificar el parámetro de origen)


9
2017-07-07 04:26