Angular http request get error: No 'Access-Control-Allow-Origin' header is

Question

I get error below when I send request to my api:

XMLHttpRequest cannot load http://api.myapp.example.com/v1/resources. No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://myapp.example.com' is therefore not allowed access.

As I know angular http request doesn't need to add any header. Why is it? It seems my web knowledge isn't.I couldn't understand why this error has occurred. Please help me If you know anything about this situation. My query:

$http.get('http://api.ingliz.tili.uz/v1/resources').success(function(data, status, headers) {
        console.log("success")
        console.log(data);
        console.log(status);
        $scope.resources = data
    }).error(function(data, status) {
        console.log("error")
        console.log(data);
        console.log(status);
    })

request in console:

General
    Remote Address:127.0.0.1:80
    Request URL:http://api.myapp.example.com/v1/resources
    Request Method:GET
    Status Code:200 OK
Response Header
    Connection:Keep-Alive
    Content-Length:240
    Content-Type:application/json; charset=UTF-8
    Date:Sun, 16 Aug 2015 08:04:08 GMT
    Keep-Alive:timeout=10, max=100
    Link:<http://api.myapp.example.com/v1/resources?page=1>; rel=self
    Server:Apache/2.4.10 (Win32)
    X-Pagination-Current-Page:1
    X-Pagination-Page-Count:1
    X-Pagination-Per-Page:20
    X-Pagination-Total-Count:1
Request Header
    Accept:application/json, text/plain, */*
    Accept-Encoding:gzip, deflate, sdch
    Accept-Language:en-US,en;q=0.8,ru;q=0.6,bg;q=0.4,zh-CN;q=0.2,zh;q=0.2,uz;q=0.2
    Cache-Control:max-age=0
    Connection:keep-alive
    Host:api.myapp.example.com
    Origin:http://myapp.example.com
    Referer:http://myapp.example.com/

I tried with:

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

but this is helpless.

You should use JSONP client/server side to access origin that aren't in the same domain https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS — michelem, Aug 16 '15 at 08:32
You are trying to send a request to http://api.myapp.example.com/ which is not the same as your host which is 127.0.0.1:80, hence the error. Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS for more about this. — Praveen Singh, Aug 16 '15 at 08:35
You try make cross domain request. If server allowed [JSONP](https://en.wikipedia.org/wiki/JSONP) You can use [$http.jsonp(url)](https://docs.angularjs.org/api/ng/service/$http#jsonp). If not use Your server & `file_get_contents` function. [Example;](http://stackoverflow.com/questions/31899651/angularjs-request-json-from-other-domain/); — user3335966, Aug 16 '15 at 08:38

score 3 · Answer 1 · answered Aug 16 '15 at 09:25

Configure your server to accept Cross Origin Requests

PHP

header("Access-Control-Allow-Origin: *");

ASP.NET Web API 2

1) Add the Microsoft.AspNet.WebApi.Cors NuGet package to your project.

2 ) Add this code to your configuration:

public static void Register(HttpConfiguration config)
{
    // New code
    config.EnableCors();
}

3) Add the [EnableCors] attribute to your Web API controller or controller method:

[EnableCors(origins: "http://example.com", headers: "*", methods: "*")]
public class TestController : ApiController
{
    // Controller methods not shown...
}

score 1 · Accepted Answer · answered Aug 16 '15 at 09:13

1

You must set header in your server side.

If your server side in php, add this line to your code:

header("Access-Control-Allow-Origin: *");

answered Aug 16 '15 at 09:13

Sardor Dushamov

1,665
3
17
44

Angular http request get error: No 'Access-Control-Allow-Origin' header is

2 Answers2