Medusa.js部署后API请求localhost失败，Nginx反向代理求助

环境配置 #

• Medusa服务端运行在9000端口
• Medusa管理端运行在7001端口
• Medusa商店前端运行在8000端口

当前Nginx反向代理配置如下：

server
{
    listen my_public_ip:80;
    server_name api.aray.pl www.api.aray.pl ;
    access_log /var/log/nginx/domains/api.aray.pl.log;
    access_log /var/log/nginx/domains/api.aray.pl.bytes bytes;
    error_log /var/log/nginx/domains/api.aray.pl.error.log;
    root /home/node/domains/api.aray.pl/public_html;
    index index.php index.html index.htm;
    include /usr/local/directadmin/data/users/node/nginx_php.conf;
    # Mail auto configuration (Thunderbird, MS Outlook)
    location ~ "^/\.well-known/autoconfig/mail/config-v1\.1\.xml$|^/([Aa]utodiscover)/\1\.xml$" {
        proxy_pass http://my_public_ip:9000;
        proxy_set_header X-Forwarded-For  $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
    }
    location /
    {
        # access_log off;
        proxy_buffering off;
        proxy_pass http://my_public_ip:7001;
    }
    location /nginx_static_files/
    {
        # access_log  /var/log/nginx/access_log_proxy;
        alias       /home/node/domains/api.aray.pl/public_html/;
        internal;
    }
    include /etc/nginx/webapps.conf;
}

问题现象 #

商店前端和管理面板可通过域名正常访问，但所有API请求均失败，错误信息如下：

GET http://localhost:9000/admin/store/ net::ERR_CONNECTION_REFUSED

解决方法 #

1. 修正Medusa服务端的CORS配置 #

打开Medusa服务端项目的medusa-config.js，修改CORS允许的源为你的域名：

// medusa-config.js
module.exports = {
  // 其他原有配置...
  cors: {
    origin: ["http://api.aray.pl"], // 多个域名用数组包含，例如["http://api.aray.pl", "http://store.aray.pl"]
    credentials: true,
  },
  // 其他原有配置...
};

2. 更新管理端与前端的API地址配置 #

• 管理端：在管理端项目的.env文件中，设置API地址为你的域名：

REACT_APP_MEDUSA_BACKEND_URL=http://api.aray.pl

• 商店前端：如果是Next.js搭建的前端，在.env文件中设置：

NEXT_PUBLIC_MEDUSA_BACKEND_URL=http://api.aray.pl

普通React前端对应设置REACT_APP_MEDUSA_BACKEND_URL环境变量。

3. 完善Nginx代理规则 #

当前Nginx仅将根路径代理到管理端，需要添加API路径的代理规则，把/admin和/store路径转发到Medusa服务端的9000端口。修改后的Nginx配置如下：

server
{
    listen my_public_ip:80;
    server_name api.aray.pl www.api.aray.pl ;
    access_log /var/log/nginx/domains/api.aray.pl.log;
    access_log /var/log/nginx/domains/api.aray.pl.bytes bytes;
    error_log /var/log/nginx/domains/api.aray.pl.error.log;
    root /home/node/domains/api.aray.pl/public_html;
    index index.php index.html index.htm;
    include /usr/local/directadmin/data/users/node/nginx_php.conf;

    # 代理API请求到Medusa服务端9000端口
    location /admin {
        proxy_pass http://my_public_ip:9000;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /store {
        proxy_pass http://my_public_ip:9000;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Mail auto configuration (Thunderbird, MS Outlook)
    location ~ "^/\.well-known/autoconfig/mail/config-v1\.1\.xml$|^/([Aa]utodiscover)/\1\.xml$" {
        proxy_pass http://my_public_ip:9000;
        proxy_set_header X-Forwarded-For  $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
    }

    location /
    {
        # access_log off;
        proxy_buffering off;
        proxy_pass http://my_public_ip:7001;
    }

    location /nginx_static_files/
    {
        # access_log  /var/log/nginx/access_log_proxy;
        alias       /home/node/domains/api.aray.pl/public_html/;
        internal;
    }

    include /etc/nginx/webapps.conf;
}

4. 重启所有相关服务 #

• 重启Medusa服务端，让CORS配置生效
• 重启管理端和前端服务，加载新的环境变量
• 重启Nginx：sudo systemctl restart nginx

内容的提问来源于stack exchange，提问作者Sylwester Zabielski