Node.js Vue将不会通过NGINX与Express通信

我已经在DigitalOcean droplet上设置了Vue前端和Express后端，我正在使用NGINX让他们通过API进行对话。前端可以工作，但当我尝试访问API路由时，控制台中会出现“CONNECTION_Rejected”（连接被拒绝）错误。错误指向Web包中的axios。我想我已经正确配置了NGINX（见下面的代码），当我使用curl访问API路由时，它就可以工作了

在前端，我让axios向后端发送请求，然后后端返回json数据

问题1： 如果NGINX现在正在处理Vue和Express之间的通信，那么我是否正确地认为我可以摆脱axios，因为当发出API请求时，NGINX决定如何处理它（将其发送到后端，然后将响应发送到客户端），这有效地绕过了axios与Express的通信？以下是axios代码（api.js只需导入axios并设置基本url）：

问题2： 我在前端使用https，但通过http与后端通信。在Firefox上，我得到了“CORS请求未成功”——我隐约记得在某个地方读到https到http可能会导致CORS出现问题。这可能是问题所在吗？如果是，我可以为后端和前端使用相同的SSL证书吗？我必须更改NGINX配置中的任何内容吗

这件事我已经做了好几天了，我一辈子都搞不懂。任何帮助都将不胜感激

upstream backend {
server 127.0.0.1:3000;
keepalive 8;
}

server {
    listen 443 ssl default_server;
    listen [::]:443 ssl default_server;

    root /var/www/html/PersonalWebsite/frontend/dist;

    index index.html index.htm index.nginx-debian.html;

    server_name website.com www.website.com;
    ssl_certificate <link-to-cert>;
    ssl_certificate_key <link-to-key>;
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    # Redirect to https
    if ($scheme != "https") {
            return 301 https://$host$request_uri;
    } # managed by Certbot

    location / {

            add_header 'Access-Control-Allow-Origin' 'http://localhost:8080' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' 
            always;
            try_files $uri $uri/ =404;


    }

    location /api/ {
            add_header 'Access-Control-Allow-Origin' 'http://localhost:3000' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' 
            always;

            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            proxy_pass http://backend;

    }

上游后端{
服务器127.0.0.1:3000；
保持活力8；
}
服务器{
侦听443 ssl默认_服务器；
侦听[：]：443 ssl默认_服务器；
root/var/www/html/PersonalWebsite/frontend/dist；
index.html index.htm index.nginx-debian.html；
服务器名称：website.com www.website.com；
ssl_证书；
ssl_证书_密钥；
include/etc/letsencrypt/options-ssl-nginx.conf；#由Certbot管理
ssl_dhparam/etc/letsencrypt/ssl-dhparams.pem；#由Certbot管理
#重定向到https
如果（$scheme！=“https”）{
返回301 https://$host$request\u uri；
}#由Certbot管理
地点/{
添加标题“访问控制允许来源”http://localhost:8080"永远,；
始终添加标题“访问控制允许方法”“获取、发布、选项、放置、删除”；
添加_头“访问控制允许头”“X请求，接受，内容类型，来源”
总是
try_files$uri$uri/=404；
}
地点/空气污染指数/{
添加标题“访问控制允许来源”http://localhost:3000"永远,；
始终添加标题“访问控制允许方法”“获取、发布、选项、放置、删除”；
添加_头“访问控制允许头”“X请求，接受，内容类型，来源”
总是
代理集头X-Forwarded-Proto$方案；
代理集头X-Real-IP$remote\u addr；
proxy\u set\u header X-Forwarded-For$proxy\u add\u X\u Forwarded\u For；
代理通行证http://backend;
}

}

错误可能是因为“cors”，但你试过“邮递员”吗？这个链接可以帮助你

---

是的，最后还是科尔斯。它拥有来自开发环境的旧IP。

upstream backend {
server 127.0.0.1:3000;
keepalive 8;
}

server {
    listen 443 ssl default_server;
    listen [::]:443 ssl default_server;

    root /var/www/html/PersonalWebsite/frontend/dist;

    index index.html index.htm index.nginx-debian.html;

    server_name website.com www.website.com;
    ssl_certificate <link-to-cert>;
    ssl_certificate_key <link-to-key>;
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    # Redirect to https
    if ($scheme != "https") {
            return 301 https://$host$request_uri;
    } # managed by Certbot

    location / {

            add_header 'Access-Control-Allow-Origin' 'http://localhost:8080' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' 
            always;
            try_files $uri $uri/ =404;


    }

    location /api/ {
            add_header 'Access-Control-Allow-Origin' 'http://localhost:3000' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin' 
            always;

            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            proxy_pass http://backend;

    }