The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4200' that is not equal to the supplied origin

Question

(continuation of error message in title) \" Origin \'http://127.0.0.1:4200\' is therefore not allowed access.\"

I am unable to run the same Angular 5 site on two dif

Answer 1

The problem is in the Name mapping. Since a server pool may have multiple IP addresses, most browsers map the IP address to a name. This is normally done through the requested DNS name. In your case there is no name, so it is looking up the IP address in the hosts file(/etc/hosts on Linux or C:\Windows\System32\Drivers\etc\Hosts on Windows) and returning the name from there.

Since you need to test across domains(act as 2 separate servers), add a line to your hosts file pointing myapitest.local to 127.0.0.2 . And a line myapitest2.local to 127.0.0.3 . This will allow your local naming to match the IP addresses and with proper configuration(specifying a specific listening address to bind to, for each server instance) each server instance can then run on port 80.

Use names in all Cross origin requests and authorizations.

Edit

The wildcard does not work due to Access-Control-Allow-Credentials: true.

On the dev-api.ourdomain.com server: Add a Response Header to the route file Routes/api.php that builds the Access-Control-Allow-Origin: header for approved domains. You can also apply this as Middleware, but for simplicity, I will demonstrate with simple routes. This must also be done for the preflight routes.

Route::get('/method/{id}', function (Request $request, $id) {
    $retval = method($id);
    $origin_allowed = $request->header('HTTP_ORIGIN');
    $allowed = array("dev.ourdomain.com", "dev.alternatedomain.com");
    if(in_array($origin_domain, $allowed))
        return ($retval)->header('Access-Control-Allow-Origin:',$origin_domain);
    else 
        return "Unauthorized";
});

This is just example code to demonstrate the concept.

Make sure you are clearing HTTP authorizations and csrf tokens on logout.

Answer 2

Let's assume your api runs on 8080 and your angular code on 4200.

In your angular app create a file called proxy.conf.json

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

Start angular app using this command

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

With this configuration when you call localhost:4200/api you it will call 8080 and it won't have any CORS error

Answer 3

Setup a reverse proxy server and configure paths for both the domains.
Nginx Guide

This will allow you to access everything via http://localhost/
Let's assume:
A -> Angular App (localhost:4200)
B -> Your other domain API (myapitest.local)

Example Flow:
- Browser Request(http://localhost/angular) -> Nginx -> A
- Load Data from backend -> Nginx -> B

So, with the help of Nginx, you will be able to access "A" from http://localhost/ and "B" also from http://localhost/
Since, the origin is same, there will be no CORS error.

Answer 4

i think you using web.php for this routes on the top of the file please use this and try

 <?php
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
  header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, X-CSRF-Token");

Route::get('/login', 'Auth\LoginController@showLoginForm');

Answer 5

You may have installed HTTPS Everywhere extension. Make sure you Disable HTTPS Everywhere on Localhost. That's what was causing me this problem.

Answer 6

You can set proxy for the request provided by the angular webpack developement server. By using the proxy you can change the backend URL as originated from the angular domain hosted URL. This will be achieved by --proxy-config in your serve command or package.json. so that angular will be run in different URls with same backend service.

add a file named proxy.conf.json near the package.json. from your Request get URL add /proxy

In your proxy.conf file add this

{
  "/proxy": {
  "target": "http://localhost:3000",
  "secure": false,
  "pathRewrite": {
  "^/proxy": ""
 }
}

change your serve command as

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

or

in your angular.json change the serve target

"architect": {
    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "browserTarget": "your-application-name:build",
    "proxyConfig": "proxy.conf.json"
 },

Note: make sure to add /proxy in your Http service URL and Proxy configuration in only for the development purpose

For the production environment You should configure in the webservers.