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

Nota de modificación : esta pregunta es acerca de por qué Postman no está sujeto a restricciones CORS de la misma manera que lo está XMLHttpRequest. Esta pregunta no se trata de cómo solucionar un error "No 'Access-Control-Allow-Origin' ...".

Por favor, deja de publicar :

• Configuraciones CORS para cada idioma / marco bajo el sol. En su lugar, encuentre la pregunta relevante de su lenguaje / marco .
• Servicios de terceros que permiten una solicitud para evadir CORS
• Opciones de línea de comando para desactivar CORS para varios navegadores

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

XMLHttpRequest no 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 de Chrome Postman ?

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);
    });

Si lo entendí bien, está haciendo una solicitud XMLHttpRequest a un dominio diferente al de su página. Por lo tanto, el navegador lo bloquea, ya que generalmente permite una solicitud en el mismo origen por razones de seguridad. Debe hacer algo diferente cuando desea hacer una solicitud de dominio cruzado. Un tutorial sobre cómo lograr eso es Usar CORS .

Cuando utiliza cartero, no están restringidos por esta política. Citado de Cross-Origin XMLHttpRequest :

Las páginas web normales pueden usar el objeto XMLHttpRequest para enviar y recibir datos de 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 solicite primero permisos de origen cruzado.

ADVERTENCIA: El uso Access-Control-Allow-Origin: *puede hacer que su API / sitio web sea vulnerable a los ataques de falsificación de solicitudes entre sitios (CSRF). Asegúrese de comprender los riesgos antes de usar este código.

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

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

Si está utilizando Node-red , debe permitir CORS en el node-red/settings.jsarchivo descomentando 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"
},

Si está utilizando Flask igual que la pregunta; primero tienes que instalarflask-cors

$ pip install -U flask-cors

Luego incluya los frascos en su aplicación.

from flask_cors import CORS

Una aplicación simple se verá así:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Para más detalles, puede consultar la documentación del Frasco .

Porque
$ .ajax ({type: "POST" - llama a OPTIONS
$ .post ( - Llama a POST

Ambos son diferentes El cartero llama "POST" correctamente, pero cuando lo llamemos, será "OPCIONES".

Para servicios web C #: API web

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

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

Asegúrate de no cometer 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");
    }
});

Nota: Si usted está buscando para la descarga de contenidos desde un sitio web de terceros a continuación, esto no le 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");

La aplicación de una restricción CORS es una característica de seguridad definida por un servidor e implementada por un navegador .

El navegador mira la política CORS del servidor y la respeta.

Sin embargo, la herramienta Postman no se preocupa por la política CORS del servidor.

Es por eso que el error CORS aparece en el navegador, pero no en Postman.

En la investigación a continuación como API, uso http://example.com en lugar de http: // myApiUrl / login de su pregunta, porque esta primera funciona.

Supongo que su página está en http: //my-site.local: 8088 .

La razón por la que ves resultados diferentes es que Postman:

• establecer encabezado Host=example.com(su API)
• NO establecer encabezado Origin

Esto es similar a la forma en que los navegadores envían solicitudes cuando el sitio y la API tienen el mismo dominio (los navegadores también configuran el elemento del encabezado Referer=http://my-site.local:8088, sin embargo, no lo veo en Postman). Cuando el Originencabezado no está configurado, generalmente los servidores permiten tales solicitudes de forma predeterminada.

Esta es la forma estándar en que Postman envía solicitudes. Pero un navegador envía solicitudes de manera diferente cuando su sitio y API tienen dominios diferentes , y luego se produce CORS y el navegador automáticamente:

• establece el encabezado Host=example.com(el suyo como API)
• establece encabezado Origin=http://my-site.local:8088(su sitio)

(El encabezado Referertiene el mismo valor que Origin). Y ahora, en la pestaña Consola y redes de Chrome, verá:

Cuando tiene Host != Originesto es CORS, y cuando el servidor detecta dicha solicitud, generalmente la bloquea de manera predeterminada .

Origin=nullse establece cuando abre contenido HTML desde un directorio local y envía una solicitud. La misma situación es cuando envía una solicitud dentro de un <iframe>, como en el fragmento a continuación (pero aquí el Hostencabezado no está configurado en absoluto); en general, en todos los lugares donde la especificación HTML dice origen opaco, puede traducir eso Origin=null. Puede encontrar más información sobre esto aquí .

fetch('http://example.com/api', {method: 'POST'});

Look on chrome-console > network tab

Si no utiliza una solicitud CORS simple, generalmente el navegador también envía automáticamente una solicitud de OPCIONES antes de enviar la solicitud principal; aquí encontrará más información . El fragmento a continuación lo muestra:

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});

Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

Puede cambiar la configuración de su servidor para permitir solicitudes CORS.

Aquí hay un ejemplo de configuración que activa CORS en nginx (archivo nginx.conf) - tenga mucho cuidado con la configuración always/"$http_origin"de nginx y "*"Apache - esto desbloqueará CORS de cualquier dominio.

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Aquí hay una configuración de ejemplo que activa CORS en Apache (archivo .htaccess)

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

Encontró el mismo error en un caso de uso diferente.

Caso de uso: en cromo cuando se intenta llamar al punto final Spring REST en angular.

Solución: agregue la anotación @CrossOrigin ("*") en la parte superior de la clase de controlador correspondiente.

Si usa .NET como nivel intermedio, verifique claramente el atributo de ruta, por ejemplo,

Tuve un problema cuando fue así,

[Route("something/{somethingLong: long}")] //Space.

Arreglado por esto,

[Route("something/{somethingLong:long}")] //No space

Solo para el proyecto .NET Core Web API, agregue los siguientes cambios:

1. Agregue el siguiente código después de la services.AddMvc()línea en el ConfigureServices()método del archivo Startup.cs:

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

2. Agregue el siguiente código después de la app.UseMvc()línea en el Configure()método del archivo Startup.cs:

app.UseCors(options => options.AllowAnyOrigin());

3. Abra el controlador al que desea acceder fuera del dominio y agregue este atributo siguiente en el nivel del controlador:

[EnableCors("AllowOrigin")]