Angular Web 应用程序调用mongo/golang数据库时遇到CORS策略错误的解决方法

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《Angular Web 应用程序调用mongo/golang数据库时遇到CORS策略错误的解决方法》，文章讲解的知识点主要包括，如果你对Golang方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

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

“从源“http://localhost:4200”访问“-my api url-”处的 xmlhttprequest 已被 cors 策略阻止：对预检请求的响应未通过访问控制检查：无“访问控制” -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(`${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
}

希望这足以提供观点。

解决方案

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

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

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

今天关于《Angular Web 应用程序调用mongo/golang数据库时遇到CORS策略错误的解决方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！