Nuxtjs 无法从运行在不同端口上的 Express 后端加载数据

Question

我的 NUXT SSR 网站 https://tejasjadhav2001.tech 托管在 https://34.93.29.137:3333，用于 REST 后端的 Expressjs 服务器托管在 https://34.93.29.137:3000

https://34.93.29.137:3333 被代理到使用 tejasjadhav2001.tech 作为域的 Nginx 根

前端调用后端REST API是这样的：

前端：

getArticles(id) {
    return axios({
      method: "GET",
      url: https://34.93.29.137:3000/api/v1/blog/`,
      withCredentials: true,
});

但是对后端的请求失败并出现 CORS 错误

即使我在后端配置了 CORS，如下所示：

后端：

const corsOptions ={
    origin:[
            'https://34.93.29.137:3000/',
            'https://34.93.29.137:3333',
            'https://34.93.29.137',
            'https://tejasjadhav2001.tech',
            'http://tejasjadhav2001.tech',
    ],
    credentials:true,            //access-control-allow-credentials:true
    optionSuccessStatus:200
}
console.log("Using cors options");
app.use(cors(corsOptions));

但这里的问题是，当我通过浏览器手动调用后端 API 时，不会出现 CORS 问题，例如： https://34.93.29.137:3000/api/v1/blog ，接受 SSL 警告，它加载数据，现在如果我转到 https://34.93.29.137:3333 或 https://tejasjadhav2001.tech，它还会从后端加载数据，之后网站工作一切正常

也附上我的 NGINX 配置

a@instance-1:~$ cat /etc/nginx/sites-available/default 
server {
        listen 443 ssl;
        server_name tejasjadhav2001.tech www.tejasjadhav2001.tech;

        gzip on;
        gzip_types  text/plain application/xml;
        gzip_proxied    no-cache no-store private expired auth;
        gzip_min_length 1000;
    ssl_certificate /etc/letsencrypt/live/tejasjadhav2001.tech/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/tejasjadhav2001.tech/privkey.pem; # managed by Certbot
    #ssl_password_file /etc/ssl/certs/pass.pass;
        ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers HIGH:!aNULL:!MD5;

        # This is a cache for SSL connections
        ssl_session_cache shared:le_nginx_SSL:1m;
        ssl_session_timeout 1440m;

        rewrite ^/(.*)/$ /$1 permanent;


        location / {
                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_redirect          off;
                proxy_buffering         on;
                #proxy_cache             STATIC;
                proxy_cache_valid   200 1d;
                proxy_cache_use_stale   error timeout invalid_header updating http_500 http_502 http_503 http_504;

                proxy_pass              https://34.93.29.137:3333;
                proxy_read_timeout  1m;
                proxy_connect_timeout   1m;
        }

此问题是否与 CORS 或 SSL 证书有关？ 谢谢， 光辉

Answer 1

浏览器控制台显示此错误

 GET https://34.93.29.137:3000/api/v1/blog/?page=1&limit=10&sort=-dateCreated net::ERR_CERT_AUTHORITY_INVALID

。这可能是 SSL 证书错误，如果您确实想免费使用 SSL，您可以尝试 Let's Encrypt。