在 IIS 服務器上運行的 Angular FE：對 http://localhost:8080/api 的 POST 請求生成 net::ERR_CONNECTION_REFUSED

Question

很抱歉提前發布了長篇文章，但我不是這樣的專家（尤其是在前端開發方面），我會盡量提供盡可能多的信息。 在生產服務器上部署我的 web 應用程序后的幾天里，我遇到了問題。

前端是一個 Angular 8 應用程序（部署在 IIS 上），它使用部署在 Apache Tomcat 8.5.47（安裝在同一生產服務器上）上的 Spring Boot 應用程序公開的 REST API。

如果使用任何瀏覽器，我從服務器本身訪問 www.mywebsite.com（作為一個示例，表明這是我的 webapp 注冊域），我完全沒有問題，一切正常。

當我使用另一台計算機而不是服務器時，問題就出現了。 在這種情況下，我可以在 www.mywebsite.com 上看到主頁，但是一旦應用程序嘗試使用為登錄公開的 REST API，我就會收到 POST http://localhost:8080/the-app-wish/api/在 Chrome 控制台中登錄net::ERR_CONNECTION_REFUSED。

這是Chrome 控制台中錯誤的屏幕截圖： Chrome 控制台錯誤

這是網絡標簽中的一個： Chrome 網絡標簽

讓我提供一些細節並向您展示一些來自后端的代碼（正如我所說的 Spring Boot）。 在 application.properties 中，我定義了以下內容：

server.servlet.context-path=/the-app-wish

登錄的控制器具有以下注釋：

@CrossOrigin(origins = "*", maxAge = 3600) @RestController @RequestMapping("/api")

控制器中的登錄方法是這樣的：

@PostMapping("/login")

在 WebSecurityConfig.class 中，我有以下方法來配置模式：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.cors().and().csrf().disable().
            authorizeRequests()
            .antMatchers("/api/login", "/api/register", "/api/resetpwd", "/api/confirm-reset/**", "/api/auth/**").permitAll()
            .anyRequest().authenticated()
            .and()
            .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);

    http.addFilterBefore(authenticationJwtTokenFilter(), UsernamePasswordAuthenticationFilter.class);
}

現在是關於前端（Angular 8 應用程序）的一些細節。 我定義了一個 proxy.config.json 如下：

{
  "/": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  }
}

我在 index.html 文件中添加了一個腳本，如下所示，以防 api 的基本 url 在 dev 和 prod 環境之間不同（但事實並非如此）：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Studio Scordia</title>
    <base href="/">

    <script type="text/javascript">
      var cfgApiBaseUrl = "http://localhost:8080/the-app-wish";
      /*
      DEV: http://localhost:8080/the-app-wish*
      PROD: http://localhost:9000/the-app-wish
       */
      window.cfgApiBaseUrl = cfgApiBaseUrl;
    </script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

最后，這是我的服務，它從后端使用登錄（和其他）REST API：

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private BASE_URL = window["cfgApiBaseUrl"] + "/api";

  private loginUrl = `${this.BASE_URL}/login`;
  private registerUrl = `${this.BASE_URL}/register`;
  private resetpwdUrl = `${this.BASE_URL}/resetpwd`;
  private confirmResetpwdUrl = `${this.BASE_URL}/confirm-reset`;

  constructor(private http: HttpClient) { }

  attemptAuth(credentials: AuthLoginInfo): Observable<JwtResponse> {
    return this.http.post<JwtResponse>(this.loginUrl, credentials, httpOptions);
  }

  signUp(info: SignUpInfo): Observable<string> {
    return this.http.post<string>(this.registerUrl, info, httpOptions);
  }

  resetPwd(info: ResetPwdInfo): Observable<string> {
    return this.http.post<string>(this.resetpwdUrl, info, httpOptions);
  }

  confirmResetPwd(token: string, newPassword: ChangePassword): Observable<string> {
    return this.http.post<string>(`${this.confirmResetpwdUrl}/${token}`, newPassword, httpOptions);
  }

}

我嘗試了在互聯網上找到的許多建議。 在 Angular 8 應用程序的 dist 文件夾中添加一個 web.config 如下：

<?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular Routes" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
             <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
             <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
             <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
            </conditions>
           <action type="Rewrite" url="/" />
          </rule>
       </rules>
      </rewrite>
    </system.webServer>
  </configuration>

但這無助於解決我在 POST 請求中遇到的錯誤。 我還嘗試在 Tomcat 上部署 FrontEnd 和 Backend，即使我在某處閱讀這不是一個好習慣。 無論如何，這不起作用，因為我可能無法正確配置 IIS。 我嘗試使用 isapi_redirect.dll 從 IIS 重定向對 TomCat 服務器的請求，如此處所述，但錯誤並未消失。 我究竟做錯了什么？ 這是我可以通過前端的 proxy.config.json 文件以某種方式解決的問題嗎？ 我也嘗試過這種方式，但沒有成功。 我不知道我應該嘗試什么了，因為我在開發方面不是那么資深，但我決定在這里問一個肯定比我更專業的人。 不幸的是，我是我工作的公司中唯一的開發人員，所以我沒有其他同事可以詢問。 所以，拜托，任何建議都將不勝感激。 謝謝大家。

Answer 1

確保通過 POSTMAN 或類似的帖子工作。

整個場景很簡單，服務器應該不需要太多配置就可以接受請求，如果它在不同的端口或域下，唯一重要的是CrossOrigin訪問。

我在你的一張截圖中看到的是，你的前端似乎在www.______.org 上，而后端在localhost

瀏覽器的 localhost 表示您的機器，錯誤表示服務器未運行，或者您調用的端點未啟動。

在 IIS 服務器上運行的 Angular FE：對 http://localhost:8080/api 的 POST 請求生成 net::ERR_CONNECTION_REFUSED

問題描述

1 個解決方案

解決方案1
0 2020-02-29 01:51:04

在 IIS 服務器上運行的 Angular FE：對 http://localhost:8080/api 的 POST 請求生成 net::ERR_CONNECTION_REFUSED

問題描述

1 個解決方案

解決方案1 0 2020-02-29 01:51:04

解決方案1
0 2020-02-29 01:51:04