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
– techie_28, Commented Jan 2, 2017 at 6: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
– Avnesh Shakya, Commented Jan 2, 2017 at 6: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
– Swapna, Commented Jan 2, 2017 at 6:54
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
– charlietfl, Commented Jan 2, 2017 at 7: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
– charlietfl, Commented Jan 2, 2017 at 7:30

Community · Accepted Answer · 2017-05-23 10:29:17Z

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, 2017 at 10:29

CommunityBot

11 silver badge

answered Jan 2, 2017 at 7:53

Félix Adriyel Gagnon-Grenier

8,93510 gold badges58 silver badges69 bronze badges

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

4 Comments

charlietfl Over a year ago

finally a sane answer!

charlietfl Over a year ago

worth mentioning that there are third party proxy services also. Personally I don't like using no-name ones but that option does exist

Félix Adriyel Gagnon-Grenier Over a year ago

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

charlietfl Over a year ago

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

Taras Vaskiv · Accepted Answer · 2018-02-21 10:23:10Z

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, 2018 at 10:23

Taras Vaskiv

2,4111 gold badge20 silver badges18 bronze badges

Comments

Hadi · Accepted Answer · 2017-01-02 07:51:51Z

-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 2, 2017 at 7:51

answered Jan 2, 2017 at 7:17

Hadi

4433 silver badges16 bronze badges

1 Comment

charlietfl Over a year ago

OP clearly stated they don't have back end access. How is this going to help?

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related