jquery - Magento 2 token 身份验证 - 400 错误/CORS 问题

Question

我在应用程序中使用 token 身份验证来访问 magento API。我在 postman 中进行了以下设置，效果很好:

然而，使用 jQuery post 我总是收到 400 错误，因为它似乎不支持预检的 HTTP 动词选项(我有一个 nginx 的 CORS 配置)。我试过:

$.ajax({
  method: "POST",
  url: `myip/index.php/rest/V1/integration/admin/token`,
  data: {username: 'ember-app', password: 'ember-app2'},
}).done(function(response) {
  alert(response);
});

$.ajax({
  method: "POST",
  url: `myip/index.php/rest/V1/integration/admin/token?username=ember-app&password=ember-app2`
}).done(function(response) {
  alert(response);
});

$.post(
  'myip/index.php/rest/V1/integration/admin/token', 
  {username: 'ember-app', password: 'ember-app2'},
  function(response) { alert(response); }
);

我还尝试了围绕该对象的 JSON.stringify 。为什么它在 postman 中有效，但在 xhr 中我不断收到 400 错误？此外，此请求随后会触发另一个 GET 请求，并返回 cors 错误。我的一些 $.post 会在控制台中导致此问题:

以下是一些 cURL 响应:

curl -H "Origin: http://localhost:4200" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: X-Requested-With" \
  -d '{"username": "ember-app", "password": "ember-app2"}'\
  -X OPTIONS --verbose https://myhost/index.php/rest/V1/integration/admin/token

给出的响应是:

{"message":"Request method is invalid."} 

相同:

curl -H "Origin: http://localhost:4200" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: X-Requested-With" \
  -X OPTIONS --verbose https://myhost/index.php/rest/V1/integration/admin/token?username=ember-app&password=ember-app2

但是，做一个普通的 curl 帖子效果很好:

curl -H "Content-Type: application/json" -X POST -d '{"username":"ember-app","password":"ember-app2"}' https://myhos/index.php/rest/V1/integration/admin/token

Answer 1

当请求从与第一个资源提供服务的域不同的域请求资源时，该请求被识别为跨域 HTTP 请求。出于安全原因，从脚本内部发起的跨源 HTTP 请求在浏览器中受到限制。

W3C 的跨源资源共享 (CORS) 机制定义了一个标准，该标准为 Web 服务器提供跨域访问控制，从而实现安全的跨域数据传输。它的工作原理是添加新的 HTTP header ，允许服务器定义允许使用 Web 浏览器访问该信息的源集。

此外，某些 HTTP 请求在可以修改用户数据时默认被视为不安全。这些请求会在网络浏览器中自动进行预检。这意味着在发送请求之前，浏览器将向另一个域服务器发送带有 OPTIONS 动词的预检请求，以确定实际请求是否安全发送或不发送。经服务器批准后，将发送实际请求。

当您使用 Postman 时，您的实际请求已发送，仅此而已。没有 CORS 保护或任何东西，Postman 不是网络浏览器。它确实有效。

当您使用 jQuery 在 Web 浏览器的脚本中进行 AJAX 调用时，它将遵循 CORS 标准并标记您的请求不安全，这意味着它应该预检。然后，它会使用 OPTIONS 方法向您的服务器发送第一个请求，以检查您的实际请求是否安全。这些请求需要在您的网络服务器(似乎是 Nginx)上得到允许。

您可以查看this example关于如何在 Nginx 上启用 CORS 并可能将其与您的实际配置进行比较。基本的开放配置是(我添加了一些注释):

location / {
  // OPTIONS requests.
  if ($request_method = 'OPTIONS') {
    // URI that may access the resource.
    add_header 'Access-Control-Allow-Origin' '*';

    // Methods allowed when accessing the resource.
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

    // Headers that can be used when making the actual request.
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

    // Cache the preflight result for 20 day.
    add_header 'Access-Control-Max-Age' 1728000;

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;

    return 204;
  }

  // POST requests.
  if ($request_method = 'POST') {
    // URI that may access the resource.
    add_header 'Access-Control-Allow-Origin' '*';

    // Methods allowed when accessing the resource.
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

    // Headers that can be used when making the actual request.
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
  }

  // GET requests
  if ($request_method = 'GET') {
    // URI that may access the resource.
    add_header 'Access-Control-Allow-Origin' '*';

    // Methods allowed when accessing the resource.
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

    // Methods allowed when accessing the resource.
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
  }
}

如果服务器端的一切都正常，您应该调整 jQuery 请求以匹配服务器上的预期。

jQuery.ajax({
  url: 'https://host/rest/V1/integration/admin/token',
  data: JSON.stringify({"username": "ember-app", "password": "ember-app2"}),
  contentType: "application/json",
  method: 'POST'
}).done((response) => {
  alert(response);
})