Calling from Angular JS to web API error: The 'Access-Control-Allow-Origin' header contains multiple values, Origin is therefore not allowed access

Question

List item

I have a web API deployed on 'https://example.com/api/gd/alldata', when i run it directly from browser URL it shows the result. but when i call it from other Angular JS application, it is giving me below error.

Error:

Failed to load 'https://example.com/api/gd/alldata' The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:64000, http://localhost:64000, *', but only one is allowed. Origin 'http://localhost:64000' is therefore not allowed access.

This is my new angularjs service in another application.

  var promise = $http({

        method: 'GET',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: "https://example.com/api/gd/alldata",
        //headers: headers, 
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
        }
    })
        .then(function (response) {
            console.log(response.data)
            return response.data;
        },
        function (response) {
                return response.data;
            });

Below is my API code already deployed on some link,

i enabled cors in webapiconfig and entry on startup.cs file.

Startup.cs file

    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

webapiconfig.cs

 config.EnableCors();

Can you please tell me where i am doing mistake or anything i am missing or doing wrong in my code.

no i didnt add the CORS settings on azure. i just added the cors in my website service and deployed it on azure. — Faseeh Haris
– Faseeh Haris, Commented Sep 7, 2018 at 10:02

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Since you are hosting on Azure and calling from localhost (local dev environment), you will have to update the following CORS setting on Azure App Service:

Goto your App Service on https://portal.azure.com
Search for CORS (press CTRL + /)
Add your localhost:6400 or better yet * under Allowed Origins
Save

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 7, 2018 at 9:57

bit

4,4971 gold badge33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calling from Angular JS to web API error: The 'Access-Control-Allow-Origin' header contains multiple values, Origin is therefore not allowed access

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related