CODEWITHSUNDEEP
angularlaravelsecuritycors
QuietSeditionist
QuietSeditionist

Reputation: 743

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

(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. enter image description here

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

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.

Upvotes: 21

Views: 47021

Answers (7)

Oshada Seneviratne
Oshada Seneviratne

Reputation: 1

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

Upvotes: 0

user10316640
user10316640

Reputation:

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.

Upvotes: 0

Saddam Pojee
Saddam Pojee

Reputation: 1598

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.

Upvotes: 0

Mesut Gölcük
Mesut Gölcük

Reputation: 164

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

Upvotes: 7

Hamelraj
Hamelraj

Reputation: 4826

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');

Upvotes: 1

esakki
esakki

Reputation: 153

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.

Upvotes: 0

Shailendra Gupta
Shailendra Gupta

Reputation: 1128

add this in your public/index.php file

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

Upvotes: -3

Related Questions