對.NET5API的AngularAPI請求-net::ERR_CONNECTION_REFUSE

介紹

我正在設定一個 nginx 服務器，其中 angular Universal 作為前端，.NET 5 作為后端 API。

解釋

嘗試向 API 發送發布請求時出現net::ERR_CONNECTION_REFUSED錯誤。您可以在這里自己嘗試一下：

這可能是CORS問題嗎？

代碼

Angular - 聯系服務

export class ContactService {
  constructor(private http: HttpClient, private toast: ToastService) {}
  private SendCTAMessageURL = environment.url   '/API/Contact/Contact';
  headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  public errorMessage;
  public SendContactRequestResult = new BehaviorSubject<boolean>(false);
  SendContactRequest(model: any) {
    var request = this.http.post<any>(this.SendCTAMessageURL, model);
    var response;
    request.subscribe({
      next: (data) => {
        this.toast.Toast(
          'Melding sendt!',
          'Vi kontakter deg snarest!',
          'default',
          5000
        );
        this.SendContactRequestResult.next(true);
        response = true;
      },
      error: (error) => {
        this.errorMessage = error.message;
        console.error('There was an error!', error);
        this.toast.Toast(
          'Det oppstod en feil!',
          'Kontakt oss p? tlf: 902 65 326!',
          'error',
          10000
        );
        this.SendContactRequestResult.next(false);
        response = false;
      },
    });
    return response;
  }

.NET - 啟動

       public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILoggerManager logger)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseSwagger();
                app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "ModernaMediaDotNet v1"));
            }
            app.ConfigureExceptionHandler(logger);
            app.UseRouting();
            app.UseCors(x => x
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .SetIsOriginAllowed(origin => true) // allow any origin
                    .AllowCredentials()); // allow credentials

            //app.UseHttpsRedirection();

            app.UseAuthentication();
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }

.NET - 聯系控制器

namespace ModernaMediaDotNet.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class ContactController : ControllerBase
    {

        private ITwillioService twillioService;
        private readonly ILoggerManager logger;

        public ContactController(ITwillioService twillioService, ILoggerManager logger)
        {
            this.twillioService = twillioService;
            this.logger = logger;
        }

        [HttpPost]
        public IActionResult Contact(ContactModel model)
        {
            string body = $"Melding fra MODERNA MEDIA: \n"  
                $"navn: {model.name} \n"  
                $"epost: {model.email} \n"  
                $"telefon: {model.phone} \n"  
                $"bedrift: {model.business} \n"  
                $"tittel: {model.title} \n"  
                $"innhold: {model.body}";
            logger.LogInfo("Initializing message");
            logger.LogInfo(body);
            try
            {
            var result = twillioService.SendMessage(body);
                return Ok(result);
            }
            catch (System.Exception e)
            {
                logger.LogError($"Something went wrong: {e}");
                return StatusCode(500, $"Internal server error: {e}");
            }
        }
    }
}

uj5u.com熱心網友回復：

這可以解決您的問題嗎？

uj5u.com熱心網友回復：

許多 API 呼叫的問題是瀏覽器會告訴您這是某種 CORS 錯誤，但存在與 CORS 無關的潛在錯誤。

但是在這里我認為您需要設定客戶端標頭以匹配后端 CORS 設定：-

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

嘗試

headers = headers: new HttpHeaders({
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': 'localhost:5000',
          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
          'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token, content-type'
        })

第二種方法是暫時從后端洗掉 CORS 以嘗試隔離問題。

此外（不相關但值得一看）您的 .NET 控制器定義為：-

[Route("api/[controller]/[action]")]

我覺得這有點令人困惑，我個人會這樣做以更清楚一點：-

namespace ModernaMediaDotNet.Controllers
{
    [Route("api/[controller]")] // No action here
    [ApiController]
    public class ContactController : ControllerBase
    {
      ...

然后打電話

private SendCTAMessageURL = environment.url   '/API/Contact';

它將找到默認的 POST 方法，因為它沒有名稱引數。然后，您可以像這樣更具體地定義它：-

        [HttpPost("Submit")]
        public IActionResult Contact(ContactModel model)
        {
          ...

那么你的網址是： -

private SendCTAMessageURL = environment.url   '/API/Contact/Submit';

標籤：。网 有角度的 ubuntu nginx

上一篇：在Angular中使用calc動態CSS樣式

下一篇：每行如何制作5張卡片？