CODEWITHSUNDEEP
angularspring-bootcross-domain
EL missaoui habib
EL missaoui habib

Reputation: 1075

Angular 2 Access-Control-Allow-Headers

I tried to connect to Spring rest login method with Angular 2

Angular 2 request :

    let body = JSON.stringify({ "email":"email", "password":"password" });
    this.http.post('http://localhost:9999/login/authent', body, {headers:this.getHeaders()})
  .subscribe(
    response => {
    debugger;
      localStorage.setItem('id_token', response.json().id_token);
      this.router.navigate(['home']);
    },
    error => {
      alert(error.text());
      console.log(error.text());
    }
  );


 getHeaders() {
   // let username = this.variables.getUsername();
   // let password = this.variables.getPassword();
    let username = "username";
    let password = "password";
    let headers =  new Headers();
    //headers.append("Content-Type", "text/xml");
    headers.append("Access-Control-Allow-Origin", "*");
    headers.append("Access-Control-Allow-Credentials", "true"); 
    headers.append("Authorization", "Basic " + btoa(username + ":" + password));
    headers.append("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT, DELETE");
    headers.append("Content-Type", "application/json,application/x-www-form-urlencoded");
    headers.append("Access-Control-Request-Headers", "Content-type,X-Requested-With,Origin,accept");
    let options = new RequestOptions({headers: headers});
    console.log(JSON.stringify(options));
    return options;
}

Spring filter : 

 @Component
 public class WebConfig  implements Filter {

     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-Credentials", "true");
            response.setHeader("Access-Control-Allow-Headers", "application/json,application/x-www-form-urlencoded");
            chain.doFilter(req, res);
        }

        public void init(FilterConfig filterConfig) {}

        public void destroy() {}

The request response is 200 and i have console error :

XMLHttpRequest cannot load http://localhost:9999/login/authent. Request header field body is not allowed by Access-Control-Allow-Headers in preflight response.

Upvotes: 1

Views: 10197

Answers (2)

Bettaibi Nidhal
Bettaibi Nidhal

Reputation: 215

Access-Control-Allow-Origin is a **response header**, not a **request header**
you need to fix the permission in your backend. so You must create cors.js file that contains all necessary permissions.

    function crosPermission(){
      this.permission=function(req,res,next){
        res.header('Access-Control-Allow-Origin','*');
        res.header('Access-Control-Allow-Headers','Content-Type');
        res.header('Access-Control-Allow-Methods','GET','POST','PUT','DELETE','OPTIONS');
        next();
      }
    }

    module.exports= new crosPermission();

**next step**
You need to add some line in your app.js
var cors=require('./cors');
app.use(cors.permission)

**for allow-Headers you can use also**
app.use(cors({
    allowedHeaders: ["Content-Type", "Authorization"]
}));

Upvotes: 0

Ján Halaša
Ján Halaša

Reputation: 8431

For CORS headers you better use Spring's own CORS support, not your custom filter. Check this howto: https://spring.io/guides/gs/rest-service-cors/

I guess your backend doesn't respond correctly to the OPTIONS preflight request - probably returning HTTP 404, since you have no endpoint for it (your controller handles just POST requests).

For more info about CORS, you can check Mozilla: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Upvotes: 1

Related Questions