Angular2 Access-Control-allow-têtes

Question

I essayé de se connecter au printemps méthode de connexion reste avec Anglar 2

angulaire 2 demande:

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; 
} 

filtre de printemps:

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

la demande la réponse est 200 et j'ai l'erreur de console:

XMLHttpRequest ne peut pas charger http://localhost:9999/login/authent. Le corps du champ d'en-tête de requête n'est pas autorisé par Access-Control-Allow-Headers dans la réponse de contrôle en amont.

Answer 1

Pour les en-têtes CORS, il est préférable d'utiliser le support CORS de Spring, et non votre filtre personnalisé. Cochez cette howto: https://spring.io/guides/gs/rest-service-cors/

Je suppose que votre back-end ne répond pas correctement à la demande OPTIONS prévol - puisque vous avez probablement revenir HTTP 404, aucun critère d'effet pour elle (votre contrôleur gère seulement les requêtes POST).

Pour plus d'informations sur CORS, vous pouvez vérifier Mozilla: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Answer 2

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"] 
}));