我在angularjs中缺少CORS标题'Access-Control-Allow-Origin'

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>

Answer 1

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.

Answer 2

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.

Answer 3

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)