La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso

Recibo este error al usar ngResource para llamar a una API REST en Amazon Web Services:

XMLHttpRequest no puede cargar http://server.apiurl.com:8000/s/login?login=facebook . La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: no hay un encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen ' http: // localhost '. Error 405

Servicio:

socialMarkt.factory('loginService', ['$resource', function($resource){    
    var apiAddress = "http://server.apiurl.com:8000/s/login/";
    return $resource(apiAddress, { login:"facebook", access_token: "@access_token" ,facebook_id: "@facebook_id" }, {
                getUser: {method:'POST'}
            });
}]);

Controlador:

[...]
loginService.getUser(JSON.stringify(fbObj)),
                function(data){
                    console.log(data);
                },
                function(result) {
                    console.error('Error', result.status);
                }
[...]

Estoy usando Chrome y no sé qué más hacer para solucionar este problema. Incluso he configurado el servidor para que acepte encabezados desde el origen localhost.

Te encuentras con problemas de CORS.

Hay varias formas de solucionar este problema.

1. Apague CORS. Por ejemplo: cómo apagar cors en chrome
2. Utilice un complemento para su navegador
3. Utilice un proxy como nginx. ejemplo de cómo configurar
4. Realice la configuración necesaria para su servidor. Este es más un factor del servidor web que ha cargado en su instancia EC2 (suponiendo que esto es lo que quiere decir con "servicio web de Amazon"). Para su servidor específico, puede consultar el sitio web enable CORS.

Más detalladamente, está intentando acceder a api.serverurl.com desde localhost. Esta es la definición exacta de solicitud entre dominios.

Al apagarlo solo para hacer su trabajo (OK, ponga poca seguridad para usted si visita otros sitios y simplemente patea la lata en el camino) puede usar un proxy que hace que su navegador piense que todas las solicitudes provienen del host local cuando realmente tienes un servidor local que luego llama al servidor remoto.

por lo que api.serverurl.com podría convertirse en localhost: 8000 / api y su nginx local u otro proxy enviará al destino correcto.

Ahora, por demanda popular, 100% más de información CORS ... ¡mismo gran sabor!

Y para los votantes negativos ... omitir CORS es exactamente lo que se muestra para aquellos que simplemente están aprendiendo la interfaz. https://codecraft.tv/courses/angular/http/http-with-promises/

Mi "servidor API" es una aplicación PHP, por lo que para resolver este problema encontré que la siguiente solución funciona:

Coloque las líneas en index.php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

En la api web de AspNetCore, este problema se solucionó agregando "Microsoft.AspNetCore.Cors" (ver 1.1.1) y agregando los siguientes cambios en Startup.cs.

public void ConfigureServices(IServiceCollection services)
{ 
    services.AddCors(options =>
    {
          options.AddPolicy("AllowAllHeaders",
                builder =>
            {
                    builder.AllowAnyOrigin()
                           .AllowAnyHeader()
                           .AllowAnyMethod();
                });
    });
    .
    .
    .
}

y

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{


    // Shows UseCors with named policy.
    app.UseCors("AllowAllHeaders");
    .
    .
    .
}

y poner [EnableCors("AllowAllHeaders")]el controlador.

Hay algunas advertencias cuando se trata de CORS. Primero, no permite comodines, *pero no me detenga en este. Lo he leído en alguna parte y ahora no puedo encontrar el artículo.

Si realiza solicitudes desde un dominio diferente, debe agregar los encabezados de origen de permiso.

 Access-Control-Allow-Origin: www.other.com 

Si va a realizar peticiones que afectan a los recursos del servidor como de POST / PUT / PATCH, y si el tipo MIME es diferente del siguiente application/x-www-form-urlencoded, multipart/form-datao text/plainel navegador automáticamente hará una OPCIONES prevuelos solicitan comprobar con el servidor si lo permitiría .

Por lo tanto, su API / servidor debe manejar estas solicitudes de OPCIONES en consecuencia, debe responder con el access control headerscódigo de estado de respuesta http apropiado y debe ser 200.

Los encabezados deberían ser algo como esto, ajústelos según sus necesidades:

   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

El encabezado de edad máxima es importante, en mi caso, no funcionaría sin él, supongo que el navegador necesita la información de cuánto tiempo son válidos los "derechos de acceso".

Además, si está haciendo, por ejemplo, una POSTsolicitud con application/jsonmime de un dominio diferente, también debe agregar el encabezado de origen de permiso mencionado anteriormente, para que se vea así:

   Access-Control-Allow-Origin: www.other.com 
   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

Cuando el vuelo previo tenga éxito y obtenga toda la información necesaria, se realizará su solicitud real.

En términos generales, los Access-Controlencabezados que se soliciten en la solicitud inicial o previa al vuelo deben incluirse en la respuesta para que funcione.

Hay un buen ejemplo en los documentos de MDN aquí en este enlace , y también debería consultar esta publicación SO

JavaScript XMLHttpRequest y Fetch siguen la política del mismo origen. Por lo tanto, una aplicación web que usa XMLHttpRequest o Fetch solo podría realizar solicitudes HTTP a su propio dominio.

Fuente: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Debe enviar el encabezado HTTP Access-Control-Allow-Origin: * desde el lado del servidor.

Si está utilizando Apache como su servidor HTTP, puede agregarlo a su archivo de configuración de Apache de esta manera:

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

Mod_headers está habilitado de forma predeterminada en Apache, sin embargo, es posible que desee asegurarse de que esté habilitado ejecutando:

 a2enmod headers

Si está escribiendo una extensión de Chrome

Tienes que agregar manifest.jsonlos permisos para tu (s) dominio (s).

"permissions": [
   "http://example.com/*",
   "https://example.com/*"
]

Si está utilizando el servidor IIS por casualidad. puede establecer los encabezados siguientes en la opción de encabezados de solicitud HTTP.

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: 'HEAD, GET, POST, PUT, PATCH, DELETE'
Access-Control-Allow-Headers: 'Origin, Content-Type, X-Auth-Token';

con esta publicación, obtener, etc., funcionará bien.

Para solucionar problemas de solicitudes de origen cruzado en una aplicación Node JS:

npm i cors

Y simplemente agregue las líneas de abajo al app.js

let cors = require('cors')
app.use(cors())

En PHP puede agregar los encabezados:

<?php
header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");
...

Para el servidor de matraces de Python, puede usar el complemento flask-cors para habilitar solicitudes entre dominios.

Ver: https://flask-cors.readthedocs.io/en/latest/

Nuestro equipo ve esto ocasionalmente usando Vue, axios y C # WebApi. Agregar un atributo de ruta en el punto final al que intentas acceder lo soluciona.

[Route("ControllerName/Endpoint")]
[HttpOptions, HttpPost]
public IHttpActionResult Endpoint() { }

En mi archivo de configuración de Apache VirtualHost, he agregado las siguientes líneas:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Para aquellos que utilizan Lambda Integrated Proxy con API Gateway . Necesita configurar su función lambda como si le estuviera enviando sus solicitudes directamente, lo que significa que la función debería configurar los encabezados de respuesta correctamente. (Si está utilizando funciones lambda personalizadas, esto será manejado por API Gateway).

//In your lambda's index.handler():
exports.handler = (event, context, callback) => {
     //on success:
     callback(null, {
           statusCode: 200,
           headers: {
                "Access-Control-Allow-Origin" : "*"
           }
     }
}

Creo que deshabilitar CORS desde Chrome no es una buena manera , porque si lo está usando en iónico, ciertamente en Mobile Build el problema volverá a surgir.

Así que es mejor arreglarlo en tu backend.

En primer lugar, en el encabezado, debe configurar

• encabezado ('Access-Control-Allow-Origin: *');
• header ('Conjunto de encabezados Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"');

Y si la API se comporta como GET y POST, entonces también Set en su encabezado-

if ($ _SERVER ['REQUEST_METHOD'] == 'OPTIONS') {if (isset ($ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) encabezado ("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset ($ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) encabezado ("Access-Control-Allow-Headers:
{$ _SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); salir (0); }

Una causa muy común de este error podría ser que la API del host asignó la solicitud a un método http (por ejemplo, PUT) y el cliente de la API está llamando a la API utilizando un método http diferente (por ejemplo, POST o GET)

Me enfrenté a este problema cuando el servidor DNS estaba configurado en 8.8.8.8 (de Google). En realidad, el problema estaba en el enrutador, mi aplicación intentó conectarse con el servidor a través de Google, no localmente (para mi caso particular). Eliminé 8.8.8.8 y esto resolvió el problema. Sé que estos problemas se resuelven con la configuración de CORS, pero tal vez alguien tenga el mismo problema que yo

Estoy usando AWS sdk para cargas, después de pasar algún tiempo buscando en línea, me encontré con este hilo. gracias a @lsimoneau 45581857 resulta que estaba sucediendo exactamente lo mismo. Simplemente apunté mi URL de solicitud a la región en mi depósito adjuntando la opción de región y funcionó.

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });

Las distribuciones independientes de GeoServer incluyen el servidor de aplicaciones Jetty. Habilite el uso compartido de recursos de origen cruzado (CORS) para permitir que las aplicaciones JavaScript fuera de su propio dominio utilicen GeoServer.

Descomente lo siguiente <filter>y <filter-mapping>de webapps / geoserver / WEB-INF / web.xml:

<web-app>
  <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>cross-origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

Es fácil resolver este problema con solo unos pocos pasos, sin preocuparse por nada. Amablemente, siga los pasos para resolverlo.

1. abierto ( https://www.npmjs.com/package/cors#enabling-cors-pre-flight )
2. vaya a la instalación y copie el comando npm install cors para instalar a través de la terminal de nodo
3. vaya a Uso simple (Habilitar todas las solicitudes CORS) desplazándose. Luego copie y pegue la declaración completa en su proyecto y ejecútelo ... eso funcionará con seguridad ... Copie el código de comentario y péguelo en su app.js o cualquier otro proyecto y pruébalo ... esto funcionará.Esto desbloqueará todos los recursos compartidos de origen cruzado ... para que podamos cambiar entre servicios para su uso