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

admin管理员组

文章数量:1336631

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>

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>

• javascript
• angularjs
• cors

Share Improve this question Follow edited Jan 24, 2017 at 14:34 Vishnu S Babu 1,65022 gold badges1313 silver badges2323 bronze badges asked Jan 2, 2017 at 6:48 Swapna Swapna 40333 gold badges77 silver badges2626 bronze badges 8

• your server should send that header telling about the allowed origins. – 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 Commented Jan 2, 2017 at 6:51
• 1 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 Commented Jan 2, 2017 at 6:54
• 3 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 Commented Jan 2, 2017 at 7:28
• 3 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 Commented Jan 2, 2017 at 7:30

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

As mentioned in the ments, 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.

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.

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)

本文标签： javascriptim getting CORS header AccessControlAllowOrigin’ missing in angularjsStack Overflow