javascript - Angular，HTTP Get 有效，Post 收到 CORS 错误

Question

设置

我有一个 Angular 应用程序在 JSP 应用程序的 iframe 中运行。 JSP 应用程序是遗留的，需要保留。 JSP 和 Angular 都调用相同的 REST 服务。 JSP 应用程序进行登录并接收 session cookie。由于 Angular 应用程序嵌入在同一 tomcat 服务器上的 JSP 应用程序中，因此会传输 cookie(至少我是这么理解的)。

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

获取代码

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

获取 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

邮政编码

... 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"}

错误

在浏览器控制台中，我收到以下错误，

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

在 Tomcat 中，我收到以下错误，

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

问题

我已验证 GET 和 POST 之间的 jessionid 和 csrf token 相同。我是否误解了一些基本的东西？如果我尝试做的不是处理这个问题的最佳方法。什么是？ JSP 应用程序需要存在，因为它提供了所需的功能，Angular 提供了以 JSP 应用程序无法提供的方式显示数据/与数据交互的能力。

Answer 1

• 产生 CORS 错误的原因-

  1. 浏览器无法理解应该使用哪个服务器来发送请求 从网络到后端。因为他们有 2 台服务器运行 同一个应用程序，第一个是您的本地 Angular 服务器，即 localhost & other 是你的后端服务器，可以是 tomcat 或任何其他，因此由于服务器浏览器不理解的冲突 服务器命中该请求，因此发生 CORS 错误。

  2. 您的网址中存在愚蠢的拼写错误或缺少网址的任何部分。

• 预防或解决方案-

  1. 允许所有请求到达支持的服务器，例如 GET、POST、DELETE、 PUT 等...，就像在 Spring 一样，你可以使用 @Crossorigin("*")。而不是 * 您可以使用您的首选项在 CrossOrigin 中允许。
  2. 避免拼写错误和剪切部分网址

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)