I am getting Access to XMLHttpRequest has been blocked by CORS policy error and some times 500 internal server error after making an http post request

Question

I'm getting these error after sending a post request

I'm trying to send an array of the id's of the checkbox that have been checked recently here is my code:

this array is being filled after an http get request

  user_groups: Array <any> = [];

this is the function that build the selected values and send them

addUserGroups(user_id) {
    this.spinner.show();
    const new_groups = this.getSelectedGroups();
    // this.userugroups = new_groups;
    const formdata = {
      'Groups_id': new_groups,
      'User_Id': user_id,
    };
    console.log('fromdata: ', formdata);
    this.authent.assignroles(formdata).then((res) => {
      this.spinner.hide();
      console.log('res: ', res);
      this.ngOnInit();
      this.alerts.push({
        id: 1,
        type: 'success',
        message: 'user have benn added to groups'
      });
    }, (err) => {
      this.spinner.hide();
      this.ngOnInit();
      this.alerts.push({
        id: 1,
        type: 'warning',
        message: err.json().Message
      });
      console.log('error: ', err);
    });
  }

this is the function i'm using to get the new selected checkboxes

  getSelectedGroups() {
    return this.user_groups
              .filter(group => group.selected)
              .map(group => group.role_id);
  }

i tried to fix it at my university i got error 500 internal server error but when i'm at home i get this error:

Access to XMLHttpRequest at 'http://api-accountingsystem.azurewebsites.net/api/groups/user/roles' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

if someone can please help me to fix it