CORS Header Missing Angular Resource Requests Only

I have a working node / express host running on localhost. I am creating a project application that is supposed to extract data from goodreads api. When I execute the request, I get:

Cross-Origin Request Blocked: 
The Same Origin Policy disallows reading the remote resource at 
https://www.goodreads.com/book/title.json?author=Arthur+Conan+Doyle&key=[my_key]&title=Hound+of+the+Baskervilles. 
(Reason: CORS header 'Access-Control-Allow-Origin' missing).1 <unknown>

On the server side, everything is working correctly. I have enabled CORS, and when I check the headers, "Access-Control-Allow-Origin" is available for everything that appears on my server after checking the headers in Firefox and Chrome dev tools. However, when I make a request through $ resource, "Allow-Access ..." is missing in my header. Here is the resource code:

.factory('goodReads', function($resource) {
    return $resource('https://www.goodreads.com/book/title.json');
})
.controller('AddBookSelectorController', function($resource, goodReads) {
    this.fetch = function() {
        var key = '[my_key]';
        var data = goodReads.query({author: 'Arthur Conan Doyle', key: key, title: 'Hound of the Baskervilles'});
        console.log(data);
    };
});

fetch ng-click, , CORS. - ? angular, , - , , stackoverflow.

3: . , xhr OpenBooks api, . Openshift, "Allow-Control-Access-x" . . Angular, Angular.

2:. "Allow-Control-Allow-Origin" Chrome. , localhost? - ? .

: 8 . Angular $http, Javascript xhr, HTML5 Rocks | Cors, . , , , .

, Angular, . , , Express, CORS, app.use, , :

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, Content-Length");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Credentials", "true");
    next();
});
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

: API:

Host: www.goodreads.com
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:40.0) Gecko/20100101     Firefox/40.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
DNT: 1
Referer: http://localhost:3000/
Origin: http://localhost:3000
Connection: keep-alive

Cache-Control: max-age=0, private, must-revalidate
Content-Encoding: gzip
Content-Length: 686
Content-Type: application/json; charset=utf-8
Date: Wed, 02 Sep 2015 17:20:35 GMT
Etag: "a2be782f32638d2a435bbeaf4b01274a-gzip"
Server: Server
Set-Cookie: csid=BAhJIhg1MzgtNTk4NjMzNy0wNzQ4MTM5BjoGRVQ%3D--afed14b563e5a6eb7b3fa9005de3010474230702; path=/; expires=Sun, 02 Sep 2035 17:20:33 -0000
locale=en; path=/
_session_id2=fd45336b8ef86010d46c7d73adb5f004; path=/; expires=Wed, 02 Sep 2015 23:20:35 -0000; HttpOnly
Status: 200 OK
Vary: Accept-Encoding,User-Agent
X-Content-Type-Options: nosniff, nosniff
X-Frame-Options: ALLOWALL
X-Request-Id: 1K8EJWG30GWDE4MZ4R5K
X-Runtime: 2.277972
X-XSS-Protection: 1; mode=block

.js :

Host: localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:40.0) Gecko/20100101   Firefox/40.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
DNT: 1
Referer: http://localhost:3000/
Cookie: _ga=GA1.1.1924088292.1439681064; connect.sid=s%3AB4O0Up9WF5iqkfky__I0XCiBD2aMATlq.gbJUC9GseqnJvRTEIbcwxD6cwFQeL7ljNScURCJ5As0
Connection: keep-alive
If-Modified-Since: Wed, 02 Sep 2015 17:08:40 GMT
If-None-Match: W/"886-14f8f0828c1"
Cache-Control: max-age=0

:

Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Cache-Control: public, max-age=0
Connection: keep-alive
Date: Wed, 02 Sep 2015 17:20:30 GMT
Etag: W/"886-14f8f0828c1"
Last-Modified: Wed, 02 Sep 2015 17:08:40 GMT
X-Powered-By: Express
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept
+4
1

, , , , COR, . , , CORs API Flickr.

, Angular, jQuery.ajax method xhr. . , API-, , COR. O.o jsonp, .

, , , , , :

1. , API, , CORs

, , API, CORs, . , , API, , Flickr, COR. Access-Control-Allow-Origin , JSONP .

API , , JSONP . JSONP , script. , . , . , JSONP? | CameronSpear.com

2.

, , API - , . , COR , - , . , , ajax. Access-Control - , , COR. , . JSONP, ().

, , , . COR , , , . , API .

, , , . , - COR. , , , , - , COR. .

, HTML5 Rocks | COR.

+3

Source: https://habr.com/ru/post/1605603/


All Articles