3

I'm trying to submit a login form to a rest Api, translating my Jquery/Javascript code into AngularJS. I try to use $http service for send the request, but when I submit the form, the POST request turns into OPTIONS and no request params are passed to. This is my code:

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 This is a screenshoot of browser's console

Why no parameters are passed to the HTTP POST request? Why no parameters are passed to the HTTP POST request?

Can someone help me?

ddb
  • 2,367
  • 7
  • 24
  • 33
ezio88
  • 59
  • 8

4 Answers4

0

If you are trying to do a Cross Origin Request, this could be a 'preflight request':

See this post: How to disable OPTIONS request?

Community
  • 1
  • 1
Clement
  • 3,336
  • 3
  • 20
  • 33
0

This request is called "preflight request". This appends when you try to access a resource that is from another domain. For more information you can search for Cross-origin resource sharing (CORS). During the preflight request, you should see headers starting with Access-Control-Request-* These request headers are asking the server for permissions to make the actual request. Your preflight response needs to acknowledge these headers in order for the actual request to work.

meziantou
  • 17,920
  • 7
  • 50
  • 68
  • How should I change my source code to accomplish this? – ezio88 Aug 03 '16 at 09:29
  • You can host your web page and your api on the same domain. Or you can handle the OPTIONS request on your web server to return the expected headers – meziantou Aug 03 '16 at 09:31
0

The OPTIONS that you see is a pre-flighted request that is initiated by the browser. This happens due to CORS that stands for "CROSS ORIGIN RESOURCE SHARING`.

Pre-flighted requests

In your case, your backend server needs to acknowledge the OPTIONS request and send a 200 back. Only then the browser fires the real POST request

Here are some links to get you started
Same Origin policy
AngularJS and CORS
Similar question on SO

Community
  • 1
  • 1
Srijith
  • 1,424
  • 8
  • 14
  • How should I change my source code to accomplish this? – ezio88 Aug 03 '16 at 09:29
  • So, your backend needs to acknowledge the `OPTIONS` by a 200. What kind of server do you have in your backend? Java/NodeJs..etc? – Srijith Aug 03 '16 at 09:30
  • My backend is a Java server. – ezio88 Aug 03 '16 at 09:33
  • Try [these](https://www.google.co.in/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=enable%20cors%20java) topics. The idea is to make your server send a 200 for the options. And apply security policies accordingly – Srijith Aug 03 '16 at 09:35
  • In my backend CORS is enabled. The HTTP POST doesn't have any request params, so I think this is the real problem. – ezio88 Aug 03 '16 at 09:51
0

You must define a CORS filter on your backend. I don't know which language you are using but an example in spring framework (java) would be the following.

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() {
    }
}

Basically you are stating that response.setHeader("Access-Control-Allow-Origin", "*"); can come from any domain. ( in a production environment you would limit this offcourse to your known domains ).

When implementing this filter your options request will pass through without problems.

The options call is something the browser does automatically and you really don't want to disable this as some other answers are suggesting.

Kind regards

Arno_Geismar
  • 2,229
  • 1
  • 12
  • 28
  • In my backend CORS is already enabled. The problem is that in the HTTP POST body no params are passed to (look at the second screenshoot in the question above). How can I resolve this problem? – ezio88 Aug 03 '16 at 11:01
  • show me your backend code where you define your rest endpoint please – Arno_Geismar Aug 03 '16 at 12:10