java - 通过 JQuery 调用外部域上的 RESTful 服务

Question

我尝试通过 html 页面调用 Java RESTful 服务，但总是收到如下错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource", 405 (Method Not Allowed)

我最简单的 Java 代码是:

@SuppressWarnings({ "unchecked", "rawtypes" })
@RequestMapping(value = "/prenotazioni/{id}", method = RequestMethod.POST)
public ResponseEntity<Prenotazione> updatePrenotazione(HttpServletResponse response, @PathVariable int id, @RequestBody Prenotazione obj) {

    response.addHeader("Access-Control-Allow-Origin", "*");
    response.addHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
    response.addHeader("Access-Control-Allow-Headers", "Content-Type");

    try {
        prenotazioneService.updatePrenotazione(id, obj);
    } catch (Exception e) {
        return new ResponseEntity(e.getMessage(), HttpStatus.BAD_REQUEST);
    }
    return new ResponseEntity<Prenotazione>(obj,HttpStatus.OK);
}

html代码是:

$('#btnSalva').on('click', function(e){
            //Creo la stringa JSON nel formato atteso dal servizio RESTful
            var obj = '{"aula":{"id":' + $("#id_aula").val() + '},"id_utente":1,"data_inizio":"' + $("#datetimepicker1").data().DateTimePicker.date() + '","data_fine":"' + $("#datetimepicker2").data().DateTimePicker.date() + '"}';
            var id = $("#id_evento").val();
            var url = "http://localhost:8080/gestione_aule/prenotazioni/" + id;
            //With $.post I've got error: No 'Access-Control-Allow-Origin
            $.post( "http://localhost:8080/gestione_aule/prenotazioni/" + id, obj );
            //With $.ajax I've got error: 405 (Method Not Allowed)
            /*$.ajax({
                url: "http://localhost:8080/gestione_aule/prenotazioni/" + id,
                type: "POST",
                crossDomain: true,
                data: obj,
                dataType: "jsonp",
                success:function(result){
                    alert(JSON.stringify(result));
                },
                error:function(xhr,status,error){
                    alert(status);
                }
                });*/
            /*$.postJSON = function(url, data, callback) {
                return jQuery.ajax({
                headers: { 
                'Accept': 'application/json',
                'Content-Type': 'application/json' 
                },
                'type': 'get',
                'url': url,
                'data': JSON.stringify(data),
                'dataType': 'jsonp',
                'complete': function(e){
                        alert("c " + e);
                    },
                'success': function(e){
                        alert("s " + e);
                    },
                'error': function(e){
                        alert("e " + e);
                    }           
                });
            };

            $.postJSON(url, obj, function(e){alert(e);});*/

        });

我已经尝试过:

1. 在 java servlet 中指定响应头和不指定响应头
2. 映射 PUT 和 POST 方法
3. 使用 $.post $.ajax
4. 设置数据类型 json 和 jsonp

以及许多其他组合:)

但是有人为我工作过...有什么建议吗？

注意:正如我在 $.post 代码中编写的那样，我收到错误:No 'Access-Control-Allow-Origin，使用 ajax 时出现错误:405(不允许方法)

感谢

Answer 1

这里的问题是CORS(跨域支持)有两种类型的请求:

1. 简单 - 例如 HEAD、GET 和 POST。 POST 与 content-type:application/x-www-form-urlencoded、multipart/form-data 或文本/纯文本
2. 其余请求称为预检请求

您的 CORS 请求是预检请求。在预检请求中，浏览器会触发 2 个请求:

1. OPTIONS - 要求服务器验证来源、方法和附加 header 是否可信
2. 实际请求 - 在您的情况下 POST

要解决您的案例的问题，请添加一个新的映射来处理 OPTIONS 请求:

    @RequestMapping(value = "/prenotazioni/{id}", method = RequestMethod.OPTIONS)
    public void updatePrenotazione(HttpServletResponse response, @PathVariable int id) {

        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
        response.addHeader("Access-Control-Allow-Headers", "accept, content-Type");
    }