我正在制作一个 Web 应用程序,在前端使用 Angular,在数据库后端使用 golang 和 mongo。 我已经启动并运行了数据库,并且所有路由请求都已经过测试并且正在使用 Postman。 但是,当我尝试对 Angular 应用程序的服务发出 DELETE 请求或 PUT 请求时,我遇到了以下错误:
“从来源‘http://localhost:4200’访问‘-my api url-’处的 XMLHttpRequest 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:否‘Access-Control-Allow-Origin ' header 存在于所请求的资源上。”
我可以发出 GET 和 POST 请求,但不能发出 DELETE 或 PUT。
我该如何解决这个问题?这是前端问题还是后端问题?任何帮助将不胜感激。谢谢。
PS:我正在使用 mongoHandlers。
这是我在前端的服务:
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));
}
后端代码:
路线:
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 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 处理程序:
//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
}
希望这足以提供观点。
最佳答案
我认为问题不在 Angular 方面,看起来 NodeJs 服务器正在阻止 DELETE 请求。您需要在节点服务器上允许此请求类型。
注意 - CORS:跨源资源共享,这意味着您需要告诉服务器哪些是有效来源,哪些是有效的 Http 方法类型在请求时是允许的。 (我添加了 * 表示允许所有来源)
你可以使用下面的代码(如果使用 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();
});
关于angular - 使用 angular web 应用程序调用 mongo/golang db 时被 CORS 策略错误阻止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58450951/