Angular客户端访问树莓派C#后端时localhost解析问题求助

一、前端API请求改为相对路径（最简适配动态IP方案） #

因为Nginx已配置/api路由代理到后端，前端无需硬编码域名，直接使用相对路径即可自动适配当前访问的树莓派IP：

1. 修改环境配置文件

   • environment.ts：

     export const environment = {
       production: false,
       urlAddress: ""
     };
     

   • environment.prod.ts：

     export const environment = {
       production: true,
       urlAddress: ""
     };
     

2. 调整API路由拼接逻辑
   修改请求工具类中的createCompleteRoute方法，适配空域名场景：

   private createCompleteRoute = (route: string, envAddress: string) => {
     return envAddress ? `${envAddress}/${route}` : `/${route}`;
   };
   

   这样前端发起的/api/xxx请求会自动继承当前页面的域名（即树莓派的动态IP），彻底解决请求指向客户端localhost的问题。

二、动态获取当前域名（备选方案） #

若需保留环境变量模式，可通过前端动态获取当前页面的协议与域名：

1. 先将环境文件中的urlAddress设为空：

   export const environment = {
     production: false,
     urlAddress: ""
   };
   

2. 在main.ts中初始化动态域名：

   import { environment } from './environments/environment';
   
   // 动态拼接当前页面的协议+域名+后端端口
   environment.urlAddress = `${window.location.protocol}//${window.location.hostname}:4901`;
   
   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

三、优化Nginx配置（适配动态IP） #

将Nginx的server_name改为通配符，确保树莓派IP变化时仍能正常接收请求：

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    include snippets/self-signed.conf;
    include snippets/ssl-params.conf;
    
    server_name _; # 匹配所有请求，适配动态IP

    location / {
        proxy_pass https://localhost:4200;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        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_cache_bypass $http_upgrade;
        proxy_cookie_path / "/; SameSite=None; Secure";
        proxy_read_timeout 18000s;
        proxy_send_timeout 18000s;
    }

    location /api { 
        proxy_pass https://localhost:4901;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        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_cache_bypass $http_upgrade;
    }
}

四、调整.NET 6 CORS配置（支持远程API访问） #

将CORS策略改为允许所有来源，适配动态IP下的跨域请求及Postman远程访问：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy(
            "AllowMyOrigins",
            builder =>
                builder
                    .AllowCredentials()
                    .AllowAnyOrigin()
                    .AllowAnyHeader()
                    .AllowAnyMethod());
    });

    services.AddControllersWithViews();
    services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/dist"; });
}

五、保留开发环境代理（不影响本地调试） #

开发环境的proxy.conf.json可继续使用，确保本地调试时请求能正确代理到后端：

{
  "/api": {
    "target": "https://0.0.0.0:4901",
    "secure": true,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

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