Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (19.9k points)

ERRORS:

Failed to load resource: the server responded with a status of 403 ()

login:1 Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

core.js:7187 ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"http://localhost:8080/login","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:8080/login: 0 Unknown Error","error":{"isTrusted":true}}

    at resolvePromise (zone-evergreen.js:797)

    at zone-evergreen.js:707

    at SafeSubscriber._error (Observable.js:91)

    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)

    at SafeSubscriber.error (Subscriber.js:135)

    at Subscriber._error (Subscriber.js:75)

    at Subscriber.error (Subscriber.js:55)

    at MapSubscriber._error (Subscriber.js:75)

    at MapSubscriber.error (Subscriber.js:55)

    at FilterSubscriber._error (Subscriber.js:75)

defaultErrorLogger @ core.js:7187

Errors I get

ERRORES:

Failed to load resource: the server responded with a status of 403 ()

login:1 Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

core.js:7187 ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"http://localhost:8080/login","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:8080/login: 0 Unknown Error","error":{"isTrusted":true}}

    at resolvePromise (zone-evergreen.js:797)

    at zone-evergreen.js:707

    at SafeSubscriber._error (Observable.js:91)

    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)

    at SafeSubscriber.error (Subscriber.js:135)

    at Subscriber._error (Subscriber.js:75)

    at Subscriber.error (Subscriber.js:55)

    at MapSubscriber._error (Subscriber.js:75)

    at MapSubscriber.error (Subscriber.js:55)

    at FilterSubscriber._error (Subscriber.js:75)

defaultErrorLogger @ core.js:7187

POST service in JAVA spring boot (url of the microservice: http:localhost:8080/login):

@CrossOrigin(origins = "*")

@RestController

public class dmoController {

    @SuppressWarnings("rawtypes")

    @PostMapping("/login")

    public ResponseEntity<?> login(@RequestBody String data) {

System.out.print("entra");

System.out.print(data);

HttpHeaders headers = new HttpHeaders();

headers.add("Access-Control-Allow-Origin", "*");

headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");

headers.add("Access-Control-Allow-Headers", "X-Requested-With,content-type");

headers.add("Access-Control-Allow-Credentials", "true");

return new ResponseEntity<>(headers, HttpStatus.CREATED);

    }    

}

Call to post from Angular (url angular: http:localhost:4200/login):

  public async login(email: string, password: string) {

        const data = { username: 'pepa', password: 'manoli' };

        httpOptions.headers.append('Access-Control-Allow-Origin', '*');

        httpOptions.headers.append(

            'Access-Control-Allow-Methods',

            'GET, POST, OPTIONS, PUT, PATCH, DELETE',

        );

        httpOptions.headers.append(

            'Access-Control-Allow-Headers',

            'X-Requested-With,content-type',

        );

        httpOptions.headers.append('Access-Control-Allow-Credentials', 'true');

        this.http.post(this.url, JSON.stringify(data), httpOptions).toPromise();

    }

1 Answer

0 votes
by (25.1k points)
edited by

Resolving Cors is not a client-side thing since it's your localhost development, the request origin will be different. you need to configure the server in so that it allows the request from all sources.

Searching for a good Angular training course? Then check out the Angularjs Online course from Intellipaat which has 24hrs of online training courses with 48hrs of projects and exercises for gaining the required hands-on experience.

Browse Categories

...