AngularJS $resource가 $save 메서드에 대해 HTTP POST 대신 HTTP Options를 요청합니다.

AngularJS $resource가 $save 메서드에 대해 HTTP POST 대신 HTTP Options를 요청합니다.

AngularJS로 더 큰 프로젝트를 준비하기 위해 간단한 라이브러리 어플리케이션을 작성하는 중입니다.사용에 대해 온라인에서 많이 읽은 후$resourceRESTful API와 상호 작용하기 위해 사용하는 대신 구현에 시간을 절약하고 확장할 수 있는 이점을 제공하기로 결정했습니다.$http요청할 때마다문제는 어떤 이유에서인지 (CORS에 전문가가 아니고 요청이 교차 도메인으로 전송되고 있습니다).$savemethod my Node.js 콘솔은 다음을 보여줍니다.

OPTIONS /books 200 1ms - 161b 

사용.query()method는 잘 작동합니다 - Node 콘솔에 다음이 표시됩니다.

GET /books 200 1ms - 228b

나는 이 시점에서 몇 시간 동안 갇혀서 아래에 대한 변형을 시도했지만, 그것은 항상 POST(각도 문서에 따라 이루어져야 함) 대신 Options(옵션) 요청으로 끝납니다.$save방법.

AngularJS 웹 앱

app.js

var libraryApp = angular.module('libraryApp', ['ngResource', 'ngRoute', 'libraryControllers']);

libraryApp.factory('$book', ['$resource', function ($resource) {

    return $resource('http://mywebserver\\:1337/books/:bookId', { bookId: '@bookId' });
}]);

controller.js

var libraryControllers = angular.module('libraryControllers', []);

libraryControllers.controller('BookCtrl', ['$scope', '$book', function($scope, $book) {

    ...

    $scope.addBook = function () {
        var b = new $book;
        b.isbn = "TEST";
        b.description = "TEST";
        b.price = 9.99;
        b.$save();
    };
}]);

Express REST API를 사용하는 Node.js

app.js

var express = require('express'),
    books = require('./routes/books'),
    http = require('http'),
    path = require('path');

var app = express();

...

// enable cross-domain scripting
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", req.headers.origin);
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});

// routing
app.get('/books', books.getAll);
app.get('/books/:isbn', books.get);
// This is what I want to fire with the $save method
app.post('/books', books.add);

http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port ' + app.get('port'));
});

./routes/books.js

...

exports.add = function(req, res) {

    console.log("POST request received...");
    console.log(req.body.isbn);
};

이 줄을 내 구성 기능에 넣으려고 시도했습니다.delete $httpProvider.defaults.headers.common["X-Requested-With"];하지만 변화는 없습니다.

저는 Angular/Node 전문가는 아니지만, 지금은 교차 영역인 것과 관련이 있다고 생각하고 있습니다. 그리고 말씀드린 것처럼 CORS에 대해서는 전문가가 아닙니다.

미리 감사드립니다.

제 질문에 답하는 것이 좋지 않을 수도 있다는 것을 알지만, 이 글을 올린 지 며칠 후에 문제를 알게 되었습니다.

이 모든 것은 브라우저가 CORS를 관리하는 방식에 달려 있습니다.자바스크립트에서 "간단한"(즉, GET 요청)이 아닌 교차 도메인 요청을 할 때, 왜query()function worked), 브라우저는 "비행 전" 요청 또는 "promise"라고 하는 지정된 URL/URI에 HTTP OPTIONS 요청을 자동으로 합니다.원격 소스가 HTTP 상태 코드 200을 반환하고 응답 헤더에서 허용할 내용에 대한 관련 세부 정보를 반환하는 한 브라우저는 원래의 자바스크립트 호출을 진행합니다.

jQuery의 간단한 예는 다음과 같습니다.

function makeRequest() {
    // browser makes HTTP OPTIONS request to www.myotherwebsite.com/api/test
    // and if it receives a HTTP status code of 200 and relevant details about
    // what it will accept in HTTP headers, then it will make this POST request...
    $.post( "www.myotherwebsite.com/api/test", function(data) {
        alert(data);
    });
    // ...if not then it won't - it's that simple.
}

서버가 응답 헤더에 수용할 내용에 대한 세부 정보를 추가하기만 하면 됩니다.

// apply this rule to all requests accessing any URL/URI
app.all('*', function(req, res, next) {
    // add details of what is allowed in HTTP request headers to the response headers
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Credentials', false);
    res.header('Access-Control-Max-Age', '86400');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
    // the next() function continues execution and will move onto the requested URL/URI
    next();
});

그런 다음 Express 라우팅 앞에 다음 몇 줄을 삽입하여 모든 OPTIONS 요청에 대해 HTTP 200 상태 코드를 간단히 반환합니다.

// fulfils pre-flight/promise request
app.options('*', function(req, res) {
    res.send(200);
});

이것이 이 페이지에서 같은 문제를 겪고 있는 사람들에게 도움이 되기를 바랍니다.

실제로 시도해 본 것은 아니지만, $save 요청을 어떻게 처리해야 하는지 Resource에게 알려주면 충분하지 않을까요?

$resource('http://mywebserver\\:1337/books/:bookId', { bookId: '@bookId' }, {save: {method: 'POST'});

언급URL : https://stackoverflow.com/questions/21221688/angularjs-resource-makes-http-options-request-instead-of-http-post-for-save-me