网上有几个关于同一主题的问题，但没有任何效果。
我有一个运行 Angular 应用程序的 serverXYZ、一个用于身份验证的后端 tomcat webapp、一个 nginx 服务器。Angular 应用程序在 4200 端口，tomcat 应用程序在 8080 端口。一切都在同一个主机上。
角度应用程序有一个 environment.ts 文件（注释字符串是我的测试之一，请参阅下面的 nginx conf）：
export const environment = {
production: false,
// apiUrl: 'http://serverXYZ:444/api'
apiUrl: 'http://localhost:8080/backend'
};
nginx 配置文件：
server {
listen 444;
server_name serverXYZ;
location / {
proxy_pass http://localhost:4200;
//websocket
proxy_set_header HOST $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass_request_headers on;
proxy_http_version 1.0;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_read_timeout 120s;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
}
location /api {
proxy_pass http://localhost:8080/backend;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
}
}
后端 tomcat 应用程序在其 web.xml 中有这个：
...
<!-- Tomcat built in CORS implementation -->
<!-- https://tomcat.apache.org/tomcat-7.0-doc/config/filter.html -->
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- End of built in CORS implementation -->
...
我使用我的电脑，打开浏览器，如果我连接到 http://serverXYZ:444，则使用描述的 conf 显示应用程序，但我在身份验证时收到 CORS 错误（CORS 请求失败）。相反，如果我在 environment.ts 中使用带有注释字符串的配置，则浏览器身份验证不会说 CORS，只是 403。当然，身份验证 api 已经过测试并且可以正常工作。
我一头雾水，怎么了？此外，使用 nginx 解决这个问题是我的首选方式，但不是强制性的。
编辑： 我添加了更多信息，我正在使用 "ng serve --disableHostCheck=true" 启动 Angular 应用程序。我不知道在这种情况下是否应该使用“--publicHost”选项或“--host 0.0.0.0”？
编辑 2： 我刚才看到的另一件事，Firefox 在 OPTIONS 请求上没有给我任何错误，只是在 POST 上出现 Cors。
