calling Https url on Http get request angularjs

Question

I have a Https url and want to send request to get data from that URL , scenario 1: from my browser If I hit the Url i get the response whereas from my Angularjs App I get always an error 401 , but if I hit the Api from browser I always get the correct response

for security reasons I couldn't use Url here but what I want is to:

  $http({
        method: "GET",
        url: "https://urlAdresss/",
        headers: {
            "Accept-Language": "en-US, en;q=0.8",
            "Content-Type": "application/json;charset=UTF-8"
        },
    }).then(function (_response) {
        console.log(_response
     }

I always get unauthorized I am network as well as On console any help will be greatly appreciated ,

but If I hit the same Url from browser I get the response It means the backend is working fine

I think I am missing something in my get request that's why getting the error

Answer 1

It seems a CORS (Cross-Origin Resource Sharing) issue.

In AngularJS side, you should use the following configuration in order for $http service to automatically send authorization headers to http requests.

var app = angular.module('app', [])
    .config(function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.withCredentials = true;
    });

And in backend you should specify explicitly allowed origins (eg. http://localhost:8888).
Also, note some points from here.

If you want to allow credentials then your Access-Control-Allow-Origin must not use *.