如何在Angular2中使用Backend作为Liferay服务器启用cors问题

Question

I am new to Angular2. I have to create new Angular application and Need to use services from Liferay server.

But When I call the Service using below code, it is giving Cors error.

var headers = new Headers();

    headers.append('Access-Control-Allow-Origin', '*');
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    let params: URLSearchParams = new URLSearchParams();   

    this.http.get(localStorage.getItem('domainName')+'/service-name', {headers: headers})
        .subscribe(response => {
            // login successful if there's a jwt token in the response
            console.log('Response'+response.json());
    });

My backend method is GET and I have added Cors filter property in my /webapps/Root/web.xml file

BUt in browser console it is giving below error:

XMLHttpRequest cannot load http://localhost:9080/service-name . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:4200 ' is therefore not allowed access. The response had HTTP status code 401.

Answer 1

This error comes up when the backend's response does not have the necessary Access-Control-Allow-Origin header. Please double check that the backend's headers are properly configured. Also, the frontend's request does not have to have the Access-Control-Allow-Origin header ever.