angular 您所在的位置:网站首页 前端怎么调用数据库 angular

angular

2022-11-22 01:06| 来源: 网络整理| 查看: 265

使用Angular Web App调用mongo / golang数据库时被CORS策略错误阻止 时间:2019-10-18 12:26:58

标签: angular mongodb api go cors

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

“从源'http://localhost:4200'对'-my api url-'处的XMLHttpRequest的访问已被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(`${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 }

希望这足以提供视角。

2 个答案:

答案 0 :(得分:2)

我认为问题不在角度上,它看起来NodeJs服务器正在阻止DELETE请求。您需要在节点服务器上允许此请求类型。

注意-CORS:跨域资源共享,这意味着您需要告诉服务器应请求允许哪些源是有效源,哪些是有效Http方法类型。 (我加了*,表示允许所有来源)

您可以使用以下代码(如果使用快递)

// 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(); });

答案 1 :(得分:0)

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

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


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有