使用 Angular Web 应用程序调用 mongo/golang db 时被 CORS 策略错误阻止

Posted 2023-03-04

【中文标题】使用 Angular Web 应用程序调用 mongo/golang db 时被 CORS 策略错误阻止

【英文标题】：Blocked by CORS policy error when calling to mongo/golang db with angular web app

【发布时间】：2020-02-15 10:57:38

【问题描述】：

我正在为前端制作一个带有 angular 的 web 应用程序，并在后端为数据库制作 golang 和 mongo。 我已经启动并运行了数据库，并且所有路由请求都已经过测试并且正在使用 Postman。 但是，当我尝试在 Angular 应用程序的服务上发出 DELETE 请求或 PUT 请求时，我遇到以下错误：

“从源 'http://localhost:4200' 访问 XMLHttpRequest 在 '-my api url-' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin ' 请求的资源上存在标头。"

我可以发出 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 接口：

//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

希望这足以提供观点。

【问题讨论】：

如果你用谷歌搜索并尝试一些东西，你会发现很多关于这个问题的帖子，例如***.com/questions/7067966/…

【参考方案1】：

我认为问题不在于角度，它看起来 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();
);

【讨论】：

谢谢，我添加了这个并且它有效。我还必须重组 PUT 请求，但它现在可以工作了。

快乐编码 :-)

【参考方案2】：

只需在标题中添加以下代码即可。

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

【讨论】：

感谢您提供答案！我尝试使用它，但仍然遇到一些困难。 （我不确定我是否正确插入。）。我很确定这是一个后端问题，因为在我实施 Bhagvat Lande 答案后，我得到了它的工作。