AngularJS:将数据发布到外部 REST API [英] AngularJS: POST Data to External REST API

问题描述

我有一个基本的 AngularJS 服务设置，如下所示:

I have a basic AngularJS service setup like so:

app.factory('User', function($resource) {
return $resource('http://api.mysite.com/user/:action:id/:attr', {}, {
    history: {
        method: 'GET',
        params: {
            attr: 'history'
        }
    },
    update: {
        method: 'POST',
        params: {
            name: 'test'
        }
    }
});
});

我是这样使用的:

User.history({id: 'testID'}, function(data) {
    console.log('got history');
    console.log(data);
});
User.update({id: 'me'}, function(data) {
    console.log('updated');
    console.log(data);
});

问题一: User.update() 尽管将方法设置为 POST，但仍继续发送 OPTIONS 作为请求方法.

Problem one: User.update(), despite having the method set to POST, keeps sending OPTIONS as the request method.

虽然 Chrome 开发工具报告请求标头 Access-Control-Request-Method:POST 也被发送(不确定这是否意味着什么).

Though Chrome Dev tools reports the request header Access-Control-Request-Method:POST is sent as well (Not sure if that means anything).

问题二:尽管在 API 代码中设置了这些标头，但我仍然收到 CORS 错误:

Problem two: I keep getting an error with CORS, despite having these headers set in the API code:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");

这个问题只有在发出非 GET 请求时才会出现.

This problem only shows up though if making a non-GET request.

处理这个问题的正确方法是什么?我也研究过 JSONP，但由于这是一个 RESTful api，我不确定如何解决仅支持 GET 的问题.

What's the proper way to be handling this? I've also looked into JSONP, but with this being a RESTful api, I'm not sure how to get around the problems with only GET support.

推荐答案

你的两个问题其实是一个问题.OPTIONS 请求是 CORS 过程的一部分.对于 POST 请求，浏览器首先发送一个 OPTIONS 调用，如果可以执行它，服务器就会响应.

Your two problems are actually one problem. The OPTIONS request is part of the CORS process. For POST requests, the browser first sends an OPTIONS call, and the server responds if it is okay to execute it.

如果 OPTIONS 请求失败，Angular/Chrome 会在控制台中显示原因.例如:

If the OPTIONS request fails, Angular / Chrome shows you the reason in the console. For example:

OPTIONS https://*** Request header field Content-Type is not allowed by Access-Control-Allow-Headers. angular.min.js:106

XMLHttpRequest cannot load https://***. Request header field Content-Type is not allowed by Access-Control-Allow-Headers. 

您可能也必须在服务器上设置 Access-Control-Allow Headers:

You probably have to set Access-Control-Allow Headers on the server, too:

header('Access-Control-Allow-Headers: Content-Type, x-xsrf-token')

x-xrsf-token 用于 angular' 以防止 CSRF.您可能需要添加更多标头，具体取决于您从客户端发送的内容.

x-xrsf-token is for angular' to prevent CSRF. You may have to add more headers, depending on what you send from the client.

这是关于 CORS 的非常好的指南:https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

Here is a very good guide on CORS: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

这篇关于AngularJS:将数据发布到外部 REST API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！