im getting CORS header ‘Access-Control-Allow-Origin’ missing in angularjs

Question

I'm getting a CORS header missing error. I can't modify the code of the back end web service, I can only change the client side application.

I can add the "Allow control allow origin" addon on google chrome but I don't want to install the add on all the clients to access the api. How can i change my AngularJS code so that I will not get this issue?

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
    $http.get('url', {
        headers: { 'Authorization': 'Basic a2VybmVsc3B==' }
    })
        .then(function (response) {
            $scope.names = response.data;
        });
});
</script>

your server should send that header telling about the allowed origins. — techie_28, Jan 02 '17 at 06:50
It's because of your have different API server, So you can add header `"Access-Control-Allow-Origin", "*"` in your back-end server. — Avnesh Shakya, Jan 02 '17 at 06:51
im able to resove this issue by adding addon in google chrome , then y cant i write code in front end application for that for cors header missing — Swapna, Jan 02 '17 at 06:54
@Swapna You don't have to worry about the addons. They are allowed to get the data like postman. They can fetch data without any cors error. — Jai, Jan 02 '17 at 06:58
The only way you can do this is by using a proxy. ***All the suggestions to use jsonp will not work*** since jsonp does not support headers — charlietfl, Jan 02 '17 at 07:28
a server side script on a server you control that makes a cURL request to remote api or a third party service. Do a web search — charlietfl, Jan 02 '17 at 07:30
I'm just guessing here, but how would you know the Content type? Can you add an entry in headers like `'Content-Type': 'application/json; charset=utf-8'` ? — kreddyio, Jan 02 '17 at 12:15

score 2 · Answer 1 · edited May 23 '17 at 10:29

2

As mentioned in the comments, you will have to use a proxy, or some sort of proxy. There is no way around this.

However, it is fairly straightforward: make the server that serves the angularjs application do the api call.

First, you have to understand what server and client is. Afterwards, you need to understand that your angularjs application is served from a server. Your angularjs application can make http requests to that server, which will in turn make the call to the api, and return the result to the client:

I am somewhat assuming a Node server is serving your angularjs application, but any server can do the same, it will be able to make the http request without being a cross origin request.

In your case, when you do the url call, instead, call the server that serves your application, and then, from that server, create a service that will call the external api.

edited May 23 '17 at 10:29

Community

1
1

answered Jan 02 '17 at 07:53

Félix Adriyel Gagnon-Grenier

8,422
10
52
65

2

finally a sane answer! – charlietfl Jan 02 '17 at 07:56
worth mentioning that there are third party proxy services also. Personally I don't like using no-name ones but that option does exist – charlietfl Jan 02 '17 at 08:02
good point. However I rarely (never) use those, hence I am a bit hesitant to explain about that. will update if I feel I can add something worthwhile – Félix Adriyel Gagnon-Grenier Jan 02 '17 at 08:05
I have used several different ones that Yahoo supported. One is dead , was called pipes and was pretty cool. The other YQL is still alive and can do a lot of different things....xml to json, html scraper , straight json retrieval among a few – charlietfl Jan 02 '17 at 08:07

score 0 · Answer 2 · answered Feb 21 '18 at 10:23

0

I had the same error. Angular at front makes requests to backend. Nginx is the proxy. So I added this line to my nginx config

location /database/ {
        add_header Access-Control-Allow-Origin *;
        <other_lines>
}

This solved my CORSs issue.

answered Feb 21 '18 at 10:23

Taras Vaskiv

2,215
1
18
17

Hadi · Answer 3 · 2017-01-02T07:51:51.897

-1

if you are using IIS Web server please add below config to your web.config file.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

If you dont have access to backend use $http.jsonp(url) instead of $http.get(url)

edited Jan 02 '17 at 07:51

answered Jan 02 '17 at 07:17

Hadi

443
3
15

2

OP clearly stated they don't have back end access. How is this going to help? – charlietfl Jan 02 '17 at 07:26

im getting CORS header ‘Access-Control-Allow-Origin’ missing in angularjs

3 Answers3