如何使用nginx在azure远程桌面上部署Angular+Springboot项目.我在访问远程站点时遇到了这个cor

Question

我是部署新手。我使用Azure远程服务器进行项目部署。正如您所知，angular使用localhost:4200，springboot使用localhost:8080。当我在远程服务器上运行项目时，它运行得很好。但当我通过远程服务器ip远程运行/访问它时，我只能访问前端部分。当我检查控制台时，它们显示了cors错误。

对于cors错误，我已经在后台添加了代码。因此不存在这样的问题。但是当我尝试远程访问它时，它会出现这个错误。

第1个错误(main.7dc5cf0db6092584.js:1错误Mk｛headers:Ws，status：0，statusText:"未知错误"，url:"http://localhost:8080/projects'，ok：false，…｝错误：ProgressEvent｛isTrusted:true，lengthComputable:false，已加载：0，总计：0，类型："error"，…｝headers:Ws｛normalizedNames:Map(0(，lazyUpdate:null，headers:Map(1(｝消息："；的Http失败响应http://localhost:8080/projects:0未知错误"；名称："；HttpErrorResponse"；ok：false状态：0statusText："；未知错误"；网址："；http://localhost:8080/projects"[[原型]]：mb

第2个错误("#/main/uikit/crudrules:1访问"处的XMLHttpRequesthttp://localhost:8080/escrule'来自原点'http://70.91.52.87'已被CORS策略阻止：请求客户端不是安全上下文，资源位于更私人的地址空间local中">

第三次错误(polyfills.8078d748ada0b716.js:1 GEThttp://localhost:8080/projectsnet:：ERR_FAILED

为了您的信息，我给出了我的nginx配置文件代码。

#user  nobody;
worker_processes  1;
#pid        logs/nginx.pid;
events {
worker_connections  1024;
}
http {
include       mime.types;
default_type  application/octet-stream;
#access_log  logs/access.log  main;
sendfile        on;
keepalive_timeout  65;
upstream springboot
{
server localhost:8080  max_conns=10;
}
server {
listen       80;
server_name  localhost;
#charset koi8-r;
#access_log  logs/host.access.log  main;
location / {
root   "C:/project related/NewAuditUi/dist/california-ng";
try_files $uri $uri/ index.html;
add_header 'Access-Control-Allow-Origin' '*' always;
}
location /api {
proxy_pass    http://springboot;
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-Host   $host;
proxy_set_header    X-Forwarded-Server $host;
proxy_set_header    X-Forwarded-Port   $server_port;
proxy_set_header    X-Forwarded-Proto  $scheme;
} 
error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   html;
}   
}
}

我欢迎您的所有建议。如果需要更多信息，请毫不犹豫地询问。提前谢谢。

Answer 1

在角度应用程序中，尝试设置选项。要调用HTTP请求，请使用以下选项。

const options = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
Authorization: 'Basic ',// your authorization method
'Access-Control-Allow-Headers':
'Origin, X-Requested-With, Content-Type, Accept'
})
};
getPerson(name: string): Observable<any> {
return this.http
.get<any>(baseUrl + '/persons/' + name, options)
.pipe(catchError(this.handleError));
}