api 서버로 post 요청시 에러..2

🌐 ASP.NET, Blazor, IIS, 웹 Q&A
1

질문2

안녕하세요, 어제도 api 서버로 post 요청하는 html 페이지를 chatgpt 님에게 부탁하여 만들었는데요…

위에 그림처럼 Failed to fetch 에러가 발생을 합니다…

지금 제가 사용하는 pc iis에 api 서버를 돌리고 있는 상태구요, postman 프로그램을 통해 json 데이타를 http://192.168.0.69:8080/api/withdraw 로 post 요청하면 잘 됩니다…

그런데 html 파일 하나 만들어서 json 파일 선택 후 해당 파일 내용 읽어서 post 전송 하려고 하면 에러가 나네여…왜 그런걸까요…

html 내용도 함께 올립니다

================================================

// 파일 입력 요소와 버튼 요소를 찾기
var fileInput = document.getElementById("jsonFile");
var sendButton = document.getElementById("sendButton");
// 버튼 요소에 클릭 이벤트 리스너 추가
sendButton.addEventListener("click", function() {
  // 파일 입력 요소에 파일이 있는지 확인
  if (fileInput.files.length > 0) {
    // FileReader 객체 생성
    var reader = new FileReader();
    // 파일 읽기가 완료되면 실행할 콜백 함수 정의
    reader.onload = function() {
      // 파일의 내용을 json 변수에 저장
      var json = JSON.parse(reader.result);
      // json 내용을 콘솔에 출력
      console.log(json);
      // fetch 함수를 사용하여 json 내용을 api server 에 post 요청
      fetch("http://192.168.0.69:8080/api/withdraw", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(json)
      })
      // fetch 함수가 성공하면 실행할 콜백 함수 정의
      .then(function(response) {
        // response 객체의 ok 속성이 true 이면 전송 성공
        if (response.ok) {
          // alert 창으로 전송 성공 메시지 띄우기
          alert("JSON 파일 전송이 성공하였습니다.");
        } else {
          // response 객체의 status 속성으로 에러 코드 확인
          // alert 창으로 전송 실패 메시지 띄우기
          alert("JSON 파일 전송이 실패하였습니다. 에러 코드: " + response.status);
        }
      })
      // fetch 함수가 실패하면 실행할 콜백 함수 정의
      .catch(function(error) {
        // error 객체의 message 속성으로 에러 메시지 확인
        // alert 창으로 전송 실패 메시지 띄우기
        alert("JSON 파일 전송이 실패하였습니다. 에러 메시지: " + error.message);
      });
    };
    // 파일 입력 요소의 첫 번째 파일을 텍스트로 읽기
    reader.readAsText(fileInput.files[0]);
  } else {
    // 파일 입력 요소에 파일이 없으면 경고창 띄우기
    alert("파일을 선택해주세요.");
  }
});

=======================

해당 내용을 검색해서 찾아보니 cors 헤더 설정을 하라고 나와서요, asp.net core web api 로 만든 api 의 program.cs 파일을 아래와 같이 추가 하고, controller 에도 아래와 같이 추가 했거든요…

그런데도 해당 에러가 발생하네요…

========
program.cs

using Microsoft.EntityFrameworkCore;
using API_TEST.Models;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container

builder.Services.AddControllers();

// Learn more about configuring Swagger/OpenAPI at Get started with Swashbuckle and ASP.NET Core | Microsoft Learn
builder.Services.AddDbContext(opt => opt.UseInMemoryDatabase(“BaseDataList”));
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

// Add CORS services 추가 부분
builder.Services.AddCors(options =>
{
options.AddPolicy(“MyCorsPolicy”, builder =>
{
builder.WithOrigins(“http://192.168.0.69:8080”)
.AllowAnyHeader()
.AllowAnyMethod();
});
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment() || app.Environment.IsProduction())
{
app.UseSwagger();
app.UseSwaggerUI();
}

app.UseHttpsRedirection();

// Add CORS middleware 추가 부분
app.UseCors(“MyCorsPolicy”);

app.UseRouting();

app.UseAuthorization();

app.MapControllers();

app.Run();

=======
controller.cs

namespace API_TEST.Controllers
{
[Route(“api/”)]
[ApiController]
[EnableCors(“MyCorsPolicy”)] // 추가 부분
public class BaseDatasController : ControllerBase
{
private readonly BaseDataContext _context;

2개의 좋아요