Enable CORS AngularJS to send HTTP POST request

Question

I want to send an HTTP POST request by submitting a form to my server, which is located at a different domain (enabled cors in the server script using node.js).

Thi

Answer 1

That's how I do CORS in express applications, you have to remember about OPTIONS because for some frameworks there are 2 calls for CORS, first one is OPTIONS which checks what methods are available and then there is actual call, OPTIONS require just empty answer 200 OK

js

allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  if ('OPTIONS' === req.method) {
    res.send(200);
  } else {
    next();
  }
};

app.use(allowCrossDomain);

Answer 2

I have been struggled for a long time to achieve this, finally I got a solution for this now.

You can achieve same thing on server side instead of messing around client side. Here is the simple CORS Filter you need to add on server side.

package com.domain.corsFilter;

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

Note: If you need help with imports for above, visit the below page topic: Filter requests for CORS Filter requests for CORS

Add this filter in your web.xml

filter
    filter-name corsFilter filter-name
    filter-class com.domain.corsFilter.SimpleCORSFilter filter-class
filter
filter-mapping
    filter-name corsFilter filter-name
    url-pattern /* url-pattern
filter-mapping

Add '<', '/>' tags in web.xml code, I had to remove to post this comment.

Answer 3

For those users who are finding an answer to make CORS requests from Angular JS. Firstly, don't spend enough time in adding unnecessary headers in your JS configuration. You don't have to change anything in your frontend. Just add the following annotation in your controller or at the method level.

@CrossOrigin

If you want to enable CORS for any specific URL then use the following annotation,

@CrossOrigin(origins = "http://localhost:9000")

The above solution is given for the Controller method CORS configuration. You shall also do Global CORS configuration by adding the following in your application class.

public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://localhost:9000");
            }
        };
    }

Reference : https://spring.io/guides/gs/rest-service-cors/

I hope this help. Peace! :)

Answer 4

Adding content-type header to following fixed the problem for me.

headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

Answer 5

You just have to add some header properties in your server side response header.

Here is an example for NodeJS server

app.all("/api/*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
  return next();
});

It will solve AngularJS cross-domain AJAX call.

I have found this solution from How to enable CORS in AngularJs