angular: el encabezado ‘Access-Control-Allow-Origin’ tiene un valor ‘http: // localhost: 4200’ que no es igual al origen proporcionado

(continuación del mensaje de error en el título) “Por lo tanto, no se permite el acceso al origen ‘http://127.0.0.1:4200‘”.

No puedo ejecutar el mismo sitio de Angular 5 en dos dominios diferentes cuando trabajo con la misma API.

Este mensaje de error proviene de Chrome. El error en Firefox es:

Solicitud de origen cruzado bloqueada: la misma política de origen no permite leer el recurso remoto en http://myapitest.local/v1/subscription/current/products. (Motivo: el encabezado CORS “Access-Control-Allow-Origin” no coincide con “http://127.0.0.1:4200“)

Me di cuenta de esto cuando trabajé en una versión con etiqueta blanca de nuestra aplicación Angular que se ejecutará en una URL alternativa de nuestra aplicación normal, pero que todavía usa la misma API de Laravel que se ejecuta en la misma URL. He agregado la configuración CORS adecuada a Laravel, esto parece ser un problema del navegador, no estoy seguro de cómo solucionarlo.

He recreado esto en localhost cambiando de localhost: 4200 a 127.0.0.1:4200, por ejemplo.

Curiosamente, la verificación previa parece tener éxito con los encabezados CORS correctos.
enter image description here

Sin embargo, en GET, parece volver con el encabezado WRONG Access-Control-Allow-Origin en la respuesta.
enter image description here

Vale la pena señalar aquí que cambiar mis orígenes permitidos en la API para permitir todos (‘*’) no soluciona este problema.

No estoy seguro de qué otra información o código podría proporcionar para aclarar esto. Gracias.

Mejor respuesta
Supongamos que su api se ejecuta en 8080 y su código angular en 4200.

En su aplicación angular, cree un archivo llamado proxy.conf.json

{
    "/api/": {
        "target": "http://localhost:8080/",
        "secure": false,
        "changeOrigin": true
    }
}

Inicie la aplicación angular con este comando

ng serve --port 4200 --proxy-config proxy.conf.json

Con esta configuración cuando llame a localhost: 4200 / api, llamará a 8080 y no tendrá ningún error CORS

Por favor indique la dirección original:angular: el encabezado ‘Access-Control-Allow-Origin’ tiene un valor ‘http: // localhost: 4200’ que no es igual al origen proporcionado - Código de registro