Ajax 跨域请求到 REST api

Question

我在后端有 REST api。我需要发出 ajax 请求来发布一些数据，然后我写：

$(function() { 
    $('#createPin').click(function(e) { 
        e.preventDefault();

var urlAjax = "http://www.agroagro.com/test/v1/register";

$.ajax({
type: "POST",
url: urlAjax,
contentType: "application/x-www-form-urlencoded",
data: {
                    name: "Mile3",
                    email: "new1@new.com",
                    password: "face1book"
                },
  crossDomain:true, 
  success: function(data) { console.log(data); },
error: function(data) {console.log(data); },
dataType: 'json',
beforeSend: function (xhr) {
            xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        },
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
});


}); 
});

但点击后我得到：

         OPTIONS http://www.agroagro.com/test/v1/register jquery-latest.min.js:4 sendjquery-latest.min.js:4 m.extend.ajaxtest.html:114 (anonymous function)jquery-latest.min.js:3 m.event.dispatchjquery-latest.min.js:3 r.handle

    XMLHttpRequest cannot load http://www.agroagro.com/test/v1/register. Invalid HTTP status code 404

    Object {readyState: 0, getResponseHeader: function, getAllResponseHeaders: function, 

setRequestHeader: function, overrideMimeType: function…}

但是当我尝试在Chrome Advanced Rest Client extension 上运行http://www.agroagro.com/test/v1/register 时，一切正常......如何以及为什么？我的 ajax 请求有什么问题？

查看图片：http://i.imgur.com/Ms0oBK9.png - 正如您所见，所有跨域扩展都非常有效。

Answer 1

您的后端 API 需要返回正确的 CORS 标头。在最简单的变体中，只需让服务器使用此标头回复预检请求（HTTP OPTIONS 动词）：

Access-Control-Allow-Origin: *

当您已设置此响应标头时，请注意您的问题显示404 代码（未找到）。当我浏览到http://www.agroagro.com/test/v1/register 时，我也看到了404。不过，这可能仅适用于 GET 请求。

通过将crossDomain 属性设置为true，您是在告诉jQuery 发送一个JSONP 请求。 JSONP 请求通过将<script> 标记嵌入到正文中来工作，这会触发GET 请求。

当服务器配备了正确的 CORS 标头时，您应该禁用 crossDomain。因为，根据 jQuery 文档，如果目标域与当前打开的网页的域不同，crossDomain 默认为 true，请使用此 sn-p：

$.ajax({ 类型：“发布”， 跨域：假， // ... });

---

对于跨域请求，浏览器会先发送这样的预检请求：

OPTIONS /test/v1/register HTTP/1.1
Host: www.agroagro.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://agroagro.com
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.62 Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin, accept, x-requested-with, content-type
Accept: */*
Referer: http://agroagro.com/test.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

要确定浏览器是否可以发送 POST 请求，请检查服务器响应中的 Access-Control-Allow-Origin 标头。但是，当收到上述请求时，API 服务器会这样回复：

HTTP/1.1 200 OK
Date: Fri, 28 Nov 2014 10:37:18 GMT
Content-Type: text/plain
Content-Length: 0
Connection: keep-alive
Set-Cookie: __cfduid=d57edcdbd0a20a0d11df4dda7c3753d611417171038; expires=Sat, 28-Nov-15 10:37:18 GMT; path=/; domain=.agroagro.com; HttpOnly
Allow: POST,OPTIONS,GET,HEAD
Set-Cookie: PH_HPXY_CHECK=s1; path=/
Cache-control: private
Server: cloudflare-nginx
CF-RAY: 1905edebcdb50f69-FRA

如您所见，OPTIONS 请求没有返回 Access-Control-Allow-Origin 标头。

解决方案：让 AP​​I 端点不仅为 POST 请求返回 Access-Control-Allow-Origin 标头，还为预检 OPTIONS 请求返回。

Answer 2

从您的服务器发送以下标头

Access-Control-Allow-Origin : THE SITE FROM WHICH YOU WILL MAKE THE AJAX REQUEST
Access-Control-Allow-Credentials : true

然后在jquery中添加以下代码

xhrFields: {withCredentials: true }