Azure Web App - Front End Not Connecting with Backend

Question

After hosting my front and backend applications through Azure Web App, I cannot get my front end to hit an endpoint on my backend. I continuously receive a 400 Bad Request from axios.

This used to be my local endpoint:

https://localhost:7047/api/forum

Then, I switched out the root URL to what was listed as my URL under the properties section on Azure:

https://nicksportfolio.azurewebsites.net/api/forum

On my .NET app, my CORS is configured as to allow origin:

{
builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
}));

I even went on the CORS section on Azure and set the 'Allowed Origins' to '*' as to allow access from any source to my endpoint (I'm aware this is a security concern and will change it in the future)

Answer 1

Based on the logs you provided, the 400 Bad Request error in the SignUp endpoint is likely due to a missing or invalid ProfileImageFile property in the UserDto_Creation object.

The SignUp endpoint is expecting a multipart/form-data request with the following properties:

• Username
• Password
• Email
• ProfileImageFile (optional)

If the ProfileImageFile property is not present in the request, or if the file is invalid, the API will return a 400 Bad Request error.

To fix the error, you need to make sure that the ProfileImageFile property is present in the request, and that the file is valid. You can check the validity of the file by checking the ContentType and ContentLength properties.

Using below code :

[HttpPost]
public async Task<ActionResult<UserDto_Return>> CreateUser([FromForm] UserDto_Creation newUser)
{
    string? imageUrl = null;

    if (newUser.ProfileImageFile != null && newUser.ProfileImageFile.Length != 0)
    {
        var fileName = newUser.Username + "\\" + DateTime.Now + "\\" + Path.GetExtension(newUser.ProfileImageFile.FileName);
        imageUrl = await _userService.UploadImage(newUser.ProfileImageFile, fileName);
    }

    // Manually map (due to ProfileURL)
    var newUserEntity = new Entities.User.User(newUser.Username, newUser.Password, newUser.Email)
    {
        FirstName = newUser.FirstName,
        LastName = newUser.LastName,
        Bio = newUser.Bio,
        ProfileURL = imageUrl
    };

    await _userRepository.CreateUserAsync(newUserEntity);

    var newUserToReturn = _mapper.Map<Models.User.UserDto_Return>(newUserEntity);

    return CreatedAtRoute("GetUser",
        new
        {
            username = newUserToReturn.Username,
            password = newUserToReturn.Password
        },
        newUserToReturn);
}

const formData = new FormData();
formData.append('Username', username);
formData.append('Password', password);
formData.append('Email', email);

if (profileImageFile) {
  formData.append('ProfileImageFile', profileImageFile);
}

axios.post('https://nicksportfolio.azurewebsites.net/api/user', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
})
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

• For more details refer toUpload Single And Multiple Files Using The .NET Core 6 Web API.