Question

我试图将一个登录表单提交给其他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);
     });

这是浏览器控制台的屏幕截图 This is a screenshoot of browser's console

为什么没有参数传递给HTTP POST请求？ Why no parameters are passed to the HTTP POST request?

有人能帮助我吗？

Answer 1

如果您尝试进行跨源请求，可以是＆＃39; preflight request＆＃39; ：

请参阅此帖子：How to disable OPTIONS request?

Answer 2

此请求称为“预检请求”。当您尝试访问来自其他域的资源时，会附加此消息。有关更多信息，您可以搜索跨源资源共享（CORS）。在预检请求期间，您应该看到以Access-Control-Request-*开头的标头这些请求标头要求服务器发出实际请求的权限。您的预检响应需要确认这些标题，以便实际请求起作用。

Answer 3

您看到的OPTIONS是由浏览器发起的预先发出的请求。这是因为CORS代表＆＃34;交叉原始资源共享'。

Pre-flighted requests

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

以下是一些可以帮助您入门的链接 Same Origin policy
AngularJS and CORS
Similar question on SO

Answer 4

您必须在后端定义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", "*");可以来自任何域。（在生产环境中，您可以将此权限限制在已知域中。）

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

选项调用是浏览器自动执行的操作，您实际上并不想像其他一些答案所暗示的那样禁用它。

亲切的问候

HTTP POST变为OPTIONS AngularJS

4 个答案: