Angular，HTTP Get正常工作，Post收到CORS错误 [英] Angular, HTTP Get works, Post receives CORS error

问题描述

设置

我有一个Angular应用程序在JSP应用程序的iframe中运行。 JSP应用程序是旧的，需要保留。 JSP和Angular都调用相同的REST服务。 JSP应用程序执行登录并接收会话cookie。由于Angular应用程序嵌入在SAME Tomcat服务器上的JSP应用程序中，因此会传输cookie（至少我理解的是）。

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
│   │   ├── ...

获取代码

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

获取标题

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代码

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

POST标头

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

错误

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

In the browser console I get following error,

403：禁止访问指定资源。

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

在 Tomcat 中，出现以下错误，

Cookie / request header中的CSRF令牌为空或值不匹配

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

问题

我已验证GET和POST之间的jessionid和csrf令牌相同。我在这里误解了一些基本知识吗？如果我尝试做的不是解决此问题的最佳方法。什么是？ JSP应用程序必须存在，因为它提供了所需的功能，Angular可以提供以JSP应用程序无法显示/与数据交互的能力。

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.

推荐答案

• 产生CORS错误的原因-

  • Reasons which produce CORS error-

    
    

    1. 浏览器无法理解应该使用哪个服务器将请求
       从Web发送到后端。由于它们是为同一
       应用程序运行的2台服务器，因此第一个是您的本地角度服务器，它是localhost&
       其他是您的后端服务器，可以是tomcat或其他，因此由于服务器浏览器中的冲突导致服务器无法理解
       来满足该请求，因此发生CORS错误。

    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.

    您的URL中的拼写错误或URL的任何部分缺失。

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

  
  

  • 预防或解决方案-

  • Prevention's or solution-

    
    
    1. 允许所有请求进入后备服务器，例如GET，POST，DELETE，
       PUT等。像在春天，您可以使用@Crossorigin（ *）。而不是*
       您可以使用首选项在CrossOrigin中允许使用。
    
    
    2. 避免拼写错误和剪切URL的一部分
    
    

  
  

  
  

  403表示禁止请求-（服务器限制您点击请求）

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

  401表示未经授权的请求-（通常在没有登录数据或令牌过期或请求中没有令牌的情况下）

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

  这篇关于Angular，HTTP Get正常工作，Post收到CORS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！