HTTP POST 变成 OPTIONS AngularJS答案

【问题标题】：HTTP POST turns into OPTIONS AngularJSHTTP POST 变成 OPTIONS AngularJS
【发布时间】：2016-12-08 21:34:45
【问题描述】：

我正在尝试将登录表单提交给 rest Api，将我的 Jquery/Javascript 代码翻译成 AngularJS。我尝试使用$http 服务发送请求，但是当我提交表单时，POST 请求变成了 OPTIONS 并且没有传递请求参数。这是我的代码：

controller.formData = {
    username :  $scope.formData.username,
    password :  $scope.formData.password,
};
$http({
      method  : 'POST',
      url     : 'http://localhost:8080/multe-web/signin',
      data    : controller.formData,  
      headers : { 'Content-Type': 'application/json' }  
     })
    .success(function(data) {
        console.log(data);
     });

这是浏览器控制台的屏幕截图

为什么没有参数传递给 HTTP POST 请求？

有人可以帮助我吗？

【问题讨论】：

我相信您遇到了 cors 政策问题。浏览器将使用选项请求预检您的帖子。
我编辑问题。

标签： angularjs json http-post angularjs-http

【解决方案1】：

您必须在后端定义 CORS 过滤器。我不知道您使用的是哪种语言，但以下是 spring 框架 (java) 中的示例。

import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, cache-control, content-type, Origin, key");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }
}

基本上你是说response.setHeader("Access-Control-Allow-Origin", "*"); 可以来自任何域。（在生产环境中，您可以将此课程限制在您的已知域中）。

实施此过滤器时，您的选项请求将毫无问题地通过。

选项调用是浏览器自动执行的操作，您真的不想像其他一些答案所建议的那样禁用它。

亲切的问候

【讨论】：

在我的后端 CORS 已经启用。问题是在 HTTP POST 正文中没有传递任何参数（查看上面问题中的第二个屏幕截图）。我该如何解决这个问题？
请告诉我你定义休息端点的后端代码

【解决方案2】：

您看到的OPTIONS 是由浏览器发起的预发送请求。这是因为CORS 代表“跨源资源共享”。

Pre-flighted requests

在您的情况下，您的后端服务器需要确认 OPTIONS 请求并返回 200。只有这样浏览器才会触发真正的POST 请求

这里有一些链接可以帮助您入门
Same Origin policy
AngularJS and CORS
Similar question on SO

【讨论】：

我应该如何更改我的源代码来完成这个？
所以，您的后端需要通过 200 确认 OPTIONS。您的后端有什么样的服务器？ Java/NodeJs..等？
我的后端是 Java 服务器。
尝试these 主题。这个想法是让您的服务器为选项发送 200。并相应地应用安全策略
在我的后端启用了 CORS。 HTTP POST 没有任何请求参数，所以我认为这是真正的问题。

【解决方案3】：

此请求称为“预检请求”。当您尝试访问来自另一个域的资源时，这会附加。有关更多信息，您可以搜索跨域资源共享 (CORS)。在预检请求期间，您应该看到以Access-Control-Request-* 开头的标头这些请求标头正在向服务器请求权限以发出实际请求。您的预检响应需要确认这些标头才能使实际请求生效。

【讨论】：

我应该如何更改我的源代码来完成这个？
您可以在同一个域中托管您的网页和您的 api。或者您可以在 Web 服务器上处理 OPTIONS 请求以返回预期的标头

【解决方案4】：

如果您尝试执行跨域请求，这可能是 'preflight request'：

看到这个帖子：How to disable OPTIONS request?

【讨论】：

我应该如何更改我的源代码来完成这个？