Si entendí bien, estás haciendo un XMLHttpRequest a un dominio diferente al que se encuentra su página. Por lo que el navegador lo está bloqueando ya que suele permitir una petición en el mismo origen por motivos de seguridad. Debe hacer algo diferente cuando desee realizar una solicitud entre dominios.

Cuando utiliza Postman, no están restringidos por esta política. Citado de XMLHttpRequest de origen cruzado:

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 hablar con servidores remotos fuera de su origen, siempre que primero solicite permisos de origen cruzado.

ADVERTENCIA: Usar Access-Control-Allow-Origin: * puede hacer que su API/sitio web sea vulnerable a solicitud de falsificación a través del sitio (CSRF) ataques. Asegúrate de que entender los riesgos antes de usar este código.

Es muy simple de resolver si estás 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 Nodo-rojo tienes que permitir CORS en el capítulo respecto a la node-red/settings.js archivo 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 Frasco igual que la pregunta; primero tienes que instalar flask-cors

pip install -U flask-cors

Luego incluye el frasco cuernos paquete 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 el Documentación del matraz.

Gracias
$.ajax({tipo: "POST" - llamadas OPCIONES
$ .post ( - llamadas PUBLICAR

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

Para servicios web C#: API web

Por favor agregue el siguiente código en su web.config archivo bajo el etiqueta. Esto funcionará:

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

Asegúrese de no estar cometiendo ningún error en la llamada de 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 buscas descargar contenido de un sitio web de terceros luego esto no te ayudara. 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");

Profundo

En la siguiente investigación como API, uso http://example.com en lugar de http://myApiUrl/login de su pregunta, porque este primero funciona. Supongo que su página está en http://my-site.local:8088.

NOTA: ¡La API y tu página tienen dominios diferentes!

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

• establecer encabezado Host=example.com (su API)
• NO establecer encabezado Origin
• El cartero en realidad no usa la URL de su sitio web en absoluto (solo ingresa su dirección API en el cartero); solo envía una solicitud a la API, por lo que asume que el sitio web tiene la misma dirección que la API (el navegador no asume esto)

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 de encabezado Referer=http://my-site.local:8088, sin embargo no lo veo en Postman). Cuándo Origin el encabezado es no establecido, por lo general los servidores permiten este tipo de 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 diferentes dominios, y entonces CORS ocurre y el navegador automáticamente:

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

(El encabezado Referer tiene el mismo valor que Origin). Y ahora en Chrome Consola y Redes pestaña verás:

Cuando tengas Host != Origin esto es CORS, y cuando el servidor detecta tal solicitud, generalmente lo bloquea por defecto.

Origin=null se establece cuando abre contenido HTML desde un directorio local y envía una solicitud. La misma situación es cuando envías una solicitud dentro de un <iframe>, como en el fragmento a continuación (pero aquí el Host el encabezado no está configurado en absoluto) - en general, en todas partes donde la especificación HTML dice origen opaco, puede traducir eso a Origin=null. Más información sobre esto se puede encontrar aquí.

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

Look on chrome-console > network tab

Si no utiliza una solicitud CORS simple, por lo general, el navegador también envía automáticamente una solicitud de OPCIONES antes de enviar la solicitud principal; se proporciona más información. aquí. El siguiente fragmento 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 una configuración de ejemplo que enciende CORS en nginx (archivo nginx.conf) - tenga mucho cuidado con la configuración always/"$http_origin" para nginx y "*" para Apache: esto desbloqueará CORS de cualquier dominio (en producción, en lugar de estrellas, use la dirección de su página concreta que consume su API)

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 enciende 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"

La aplicación de una restricción CORS es una característica de seguridad definida por un servidor e implementada por un cada 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.

Por eso aparece el error CORS en el navegador, pero no en Postman.

El error que obtiene se debe al estándar CORS, que establece algunas restricciones sobre cómo JavaScript puede realizar solicitudes ajax.

El estándar CORS es un estándar del lado del cliente, implementado en el navegador. Por lo tanto, es el navegador el que evita que se complete la llamada y genera el mensaje de error, no el servidor.

Postman no implementa las restricciones de CORS, por lo que no ve el mismo error al realizar la misma llamada desde Postman.

¿Por qué ¿Postman no implementa CORS? CORS define las restricciones relativas al origen (dominio URL) de la página que inicia la solicitud. Pero en Postman, las solicitudes no se originan en una página con una URL, por lo que CORS no se aplica.

Orígenes de soluciones y problemas

Estas haciendo un XMLHttpRequest a diferentes dominios, ejemplo:

1. Dominio uno: some-domain.com
2. Dominio dos: some-different-domain.com

Esta diferencia en los nombres de dominio desencadena CORS (Uso compartido de recursos entre orígenes) política llamada SOP (Política del mismo origen) que impone el uso de los mismos dominios (por lo tanto Natural) en Ajax, XMLHttpRequest y otras solicitudes HTTP.

¿Por qué funcionó cuando hice la solicitud a través de la extensión Postman de Chrome?

Un cliente (la mayoría Navegadores y Herramientas de desarrollo) tiene la opción de hacer cumplir la Política del mismo origen.

La mayoría de los navegadores aplican la política de Política del mismo origen para evitar problemas relacionados con CSRF (Falsificación de solicitudes entre sitios) ataque.

Cartero como herramienta de desarrollo elige no aplicar SOP mientras que algunos navegadores lo hacen, es por eso que puede enviar solicitudes a través de Postman que no puede enviar con XMLHttpRequest a través de JS usando el navegador.

Para fines de prueba del navegador:

Windows - Ejecutar:

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

El comando anterior deshabilitará la seguridad web de Chrome. Entonces, por ejemplo, si trabaja en un proyecto local y encuentra un problema de política CORS cuando intenta realizar una solicitud, puede omitir este tipo de error con el comando anterior. Básicamente, abrirá una nueva sesión de Chrome.

También puede recibir este error si el tiempo de espera de su puerta de enlace es demasiado corto y el recurso al que está accediendo tarda más en procesarse que el tiempo de espera. Este puede ser el caso de consultas de bases de datos complejas, etc. Por lo tanto, el código de error anterior puede estar ocultando este problema. Simplemente verifique si el código de error es 504 en lugar de 404 como en la respuesta de kamil o algo mas. Si es 504, entonces aumentar el tiempo de espera de la puerta de enlace podría solucionar el problema.

En mi caso, el error CORS podría eliminarse al deshabilitar la misma política de origen (CORS) en el explorador de Internet navegador, ver Cómo deshabilitar la política del mismo origen Internet Explorer. Después de hacer esto, fue un error 504 puro en el registro.

Para resolver este problema, escriba esta línea de código en su doGet() or doPost() función cualquiera que esté usando en backend

response.setHeader("Access-Control-Allow-Origin", "*");

En lugar de "*" puede escribir el sitio web o el punto final de la URL de la API que está accediendo al sitio web; de lo contrario, será público.

Su dirección IP no está en la lista blanca, por lo que está recibiendo este error. Pídale al personal de back-end que incluya en la lista blanca su dirección IP para el servicio al que está accediendo.

Acceso-Control-Permitir-Encabezados

Para mí, tuve este problema por diferentes razones, el dominio remoto se agregó a los orígenes, la aplicación implementada funciona perfectamente, excepto en un punto final, tuve este problema:

Origin https://mai-frontend.vercel.app is not allowed by Access-Control-Allow-Origin. Status code: 500

y

Fetch API cannot load https://sciigo.herokuapp.com/recommendations/recommendationsByUser/8f1bb29e-8ce6-4df2-b138-ffe53650dbab due to access control checks.

Descubrí que la tabla de mi base de datos de Heroku no contiene todas las columnas de mi tabla local después de actualizar la tabla de la base de datos de Heroku, todo funcionó bien.

Me funciona aplicando este middleware globalmente:

<?php

    namespace App\Http\Middleware;

    use Closure;

    class Cors {
       public function handle($request, Closure $next) {
           return $next($request)
                   ->header('Access-Control-Allow-Origin', '*')
                   ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                   ->header('Access-Control-Allow-Headers', "Accept,authorization,Authorization, Content-Type");
       }
    }