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 different domains when working with the same API.

This error message is coming from Chrome. The error in Firefox is:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://myapitest.local/v1/subscription/current/products. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://127.0.0.1:4200’)

I noticed this when working on a white-labeled version of our Angular app that will be running on an alternative URL from our regular app, but still using the same Laravel api running on the same URL. I've added the appropriate CORS configuration to Laravel, this appears to be a browser issue - not sure how to get around it.

I have recreated this at localhost by changing from localhost:4200 to 127.0.0.1:4200 for instance.

Oddly, the preflight seems to be successful with correct CORS headers.

However, on the GET, it seems to come back with the WRONG Access-Control-Allow-Origin header on the response.

Worth noting here that changing my Allowed Origins in the API to allow all ('*') does not fix this issue.

I'm not sure what other information or code I could provide to make this clearer. Thanks.

Answer 1

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 2

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 3

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.

Answer 4

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 5

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 6

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

Answer 7

add this in your public/index.php file

header('Access-Control-Allow-Origin: *');