Angular, HTTP Get works, Post receives CORS error

Question

Setup

I have an Angular app running in an iframe in a JSP application. The JSP application is legacy and needs to stay. Both JSP and Angular call the same REST services. The JSP application does the login and receives a session cookie. Since the Angular app is embedded in the JSP app on the SAME tomcat server, the cookies are transferred (at least what I understand).

tomcat
├── webapps
│   ├── jspapp
│   │   ├── ...
│   ├── angularapp
│   │   ├── ...

GET Code

... build params ...
return http.get(url,
  { params: params }).pipe(
    map(
      (response: Response) => {
        ... handle response ...
        return data;
      },
      (error: any) => {
        console.log(error);
      }
    )
  );

GET Header

GET http://severname:8080/jsprest/url/to/rest/service?param=value HTTP/1.1
Host: severname:8080
Connection: keep-alive
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
Referer: http://severname:8080/angular/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Cookie: JSESSIONID=UNIQUEID; xcp-locale=en_US; x-csrf-token=SOMETOKEN

POST Code

... build body ...
return http.post(url, body, 
  { headers: { 'Accept': ['application/json', 'text/plain', '*/*'], 'Content-Type': 'application/json' } });

POST Header

POST  http://severname:8080/jsprest/url/to/rest/service HTTP/1.1
Host: severname:8080
Connection: keep-alive
Content-Length: 158
Accept: application/json,text/plain,*/*
Origin: http://severname:8080
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
Content-Type: application/json
Referer: http://severname:8080/angular/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Cookie: JSESSIONID=UNIQUEID; xcp-locale=en_US; x-csrf-token=SOMETOKEN

{"body":"data","foo":"bar"}

Error

In the browser console I get following error,

403: Access to the specified resource has been forbidden error.

In Tomcat I get following error,

CSRF token in cookies/request header is empty or values does not match

Question

I've verified the jessionid and csrf token are identical between the GET and POST. Am I mis-understanding something fundamental here? If what I'm trying do isn't the best way to handle this. What is? The JSP application needs to exist as it provides needed functionality, Angular is there to provide the ability to display/interact with data in ways the JSP application can not.

Answer 1

• Reasons which produce CORS error-

  1. Browser can't understand which server should have use to send the request from web to back-end. Because their are 2 servers running for the same app,first is your local angular server which is localhost & other is your back-end's server which is either tomcat or any other,hence due to the conflicts in server browser doesn't understand the server to hit that request and hence CORS error occur.

  2. Silly spelling mistakes in your URL or missing of any part of URL.

• Prevention's or solution-

  1. Allow all requests coming to backed server like GET, POST, DELETE, PUT etc..,like in spring you can use @Crossorigin("*").Instead of * you can use your preferences to allow in CrossOrigin.
  2. Avoid spelling mistakes and cutting parts of URL

403 means forbidden request-(Server restrict you to hit request)

401 means Unauthorised request-(Generally when no login data avail or token expires or no token in the request)