Blocked by CORS policy error when calling to mongo/golang db with angular web app

Question

I'm making a web app with angular on the frontend, and golang and mongo on the backend for the database. I have the db up and running, and all route requests have been tested and are working on Postman. However, when I try to make DELETE request or PUT request on the service of the angular app, I get hit with the following error:

"Access to XMLHttpRequest at '-my api url-' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I can make GET and POST requests, but not DELETE or PUT.

How do I get around this? Is this a frontend issue, or backend? Any help will be appreciated. Thank you.

PS: I'm using mongoHandlers.

Here's my service on the front end:

deleteShow(showId: string) {
    let headers = new HttpHeaders();
    headers.append("Content-Type", "application/json");
    return this.http
      .delete<Show>(`${environment.apiBase}/shows/${showId}`, {
        headers
      })
      .pipe(catchError(this.handleError));
  }

Backend Code:

Route:

func RouteShows(r *mux.Router, shows handlers.ShowHandler) {

    sub := r.PathPrefix("/api/shows").Subrouter()

    sub.HandleFunc("", getShows(shows)).Methods(http.MethodGet)
    sub.HandleFunc("/{id}", getShowById(shows)).Methods(http.MethodGet)
    sub.HandleFunc("/{id}", updateShow(shows)).Methods(http.MethodPut)
    sub.HandleFunc("", createShow(shows)).Methods(http.MethodPost)
    sub.HandleFunc("/{id}", deleteShow(shows)).Methods(http.MethodDelete)
    sub.HandleFunc("/status/{status}", getShowsByStatus(shows)).Methods(http.MethodGet)
}

---

API func:

func deleteShow(s handlers.ShowHandler) http.HandlerFunc {

    return func(w http.ResponseWriter, r *http.Request) {

        params := mux.Vars(r)
        var show models.Show

        if _, ok := params["id"]; !ok {
            responses.BadRequestWrapped(w, errors.New("param not found: id"))
            return
        }

        err := s.DeleteShow(params["id"])
        if err != nil {
            responses.InternalServerErrorWrapped(w, errors.FromError(err)) //TODO
            return
        }

        responses.OK(w, show)
    }

}

---

MongoHandler interface:

//ShowHandler handles the interface of mongo func
type ShowHandler interface {
    SearchShows(values map[string][]string, pagination *models.Pagination) ([]*models.Show, error)
    GetShows() ([]*models.Show, error)
    GetShowById(id string) (*models.Show, error)
    //GetAppointmentsCreatedByUser(username string) ([]*models.Appointment, error)
    GetShowsByStatus(status string) ([]*models.Show, error)

    CreateShow(show *models.Show) error
    UpdateShow(show *models.Show) error
    DeleteShow(id string) error
}

---

Mongo Handler:

//deleteShow removes a show based on Show ID from DB
func (s *shows) DeleteShow(id string) error {

    if _, err := s.mongo.DeleteOne(db_qcq, collection_shows, ValueEquals("_id", id)); err != nil {
        return err
    }

    return nil
}

Hope this is enough to give perspective.

Answer 1

I think the issue is not on the angular side, It looks NodeJs server is blocking DELETE request. You need to allow this request types on a node server.

Note - CORS: Cross-Origin Resource Sharing, that means you need to tell server from which are the valid source, and which are the valid Http method types are allowed on request. (I have added * that means all source allowed)

You can use below code (if using express)

// Initialize express middleware 
const express = require('express');
const app = express();

// Enable CORS
app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT,DELETE");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    next();
});

Answer 2

Just add this below code in your headers.

const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};