Не удается получить Json для отображения в ag Grid, просто говорит загрузка - PullRequest
Новая
       33

Не удается получить Json для отображения в ag Grid, просто говорит загрузка

8 голосов
/ 25 апреля 2019

Используя различные примеры, которые я нашел в Интернете, я собрал простое веб-приложение. Однако, хотя AG Grid (сетка, которую я выбрал для отображения данных, работает с предоставленным источником данных, она не работает с моим собственным источником данных, который был создан с использованием веб-службы, написанной на Go.

Угловой код ... 

ngOnInit() {
  this.rowData = this.http.get('https://api.myjson.com/bins/ly7d1'); 
}

Это работает правильно, показывая данные в сетке. но когда я перенаправил его мне, сгенерировал данные, используя следующее ... 

ngOnInit() {   
  this.rowData = this.http.get('http://localhost:10000/all');
}

Эта сетка просто говорит о загрузке ...

если я проверю любую ссылку в браузере, я получу точно такие же данные, отформатированные точно таким же образом ... 

[{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000}]

Вот ссылка на Json:

https://api.myjson.com/bins/ly7d1

Я запускаю и мое угловое приложение, и приложение go на одной машине, но есть разные сервисы и использующие разные порты ...

Я мог бы включить код Go, но не понимаю, насколько он актуален, поскольку данные правильно отображаются в браузере.

пытался включить только то, что имеет отношение к делу, но если я что-то пропустил, пожалуйста, дайте мне знать, и я могу загрузить.

HTML-код ... 

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>


    <button (click)="onBtExport()">Export to CSV</button>

    <ag-grid-angular
      #agGrid
      style="width: 500px; height: 500px;"
      class="ag-theme-balham"
      [rowData]="rowData | async"
      [columnDefs]="columnDefs"
      rowSelection="multiple"
    >
    </ag-grid-angular>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

Ожидаемый результат ...

AG Grid display

Перейти код веб-службы ... 

package main

import (
    "database/sql"
    "encoding/json"
    "fmt"
    "log"
    "net/http"

    "github.com/gorilla/mux"

    _ "github.com/go-sql-driver/mysql"
)

// Article - Our struct for all articles
type Article struct {

    Make string `json:"make"`
    Model   string `json:"model"`
    Price int32 `json:"price"`
}

type Articles []Article

func homePage(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Welcome to the HomePage!")
    fmt.Println("Endpoint Hit: homePage")
}

func returnAllArticles(w http.ResponseWriter, r *http.Request) {
    articles := Articles{
        Article{Make: "Toyota", Model: "Celica", Price: 35000},
        Article{Make: "Ford", Model: "Mondeo", Price: 32000},
        Article{Make: "Porsche", Model: "Boxter", Price: 72000},
        Article{Make: "Toyota", Model: "Celica", Price: 35000},
        Article{Make: "Ford", Model: "Mondeo", Price: 32000},
        Article{Make: "Porsche", Model: "Boxter", Price: 72000},
        Article{Make: "Toyota", Model: "Celica", Price: 35000},
        Article{Make: "Ford", Model: "Mondeo", Price: 32000},
        Article{Make: "Porsche", Model: "Boxter", Price: 72000},
        Article{Make: "Toyota", Model: "Celica", Price: 35000},
        Article{Make: "Ford", Model: "Mondeo", Price: 32000},
        Article{Make: "Porsche", Model: "Boxter", Price: 72000},
    }
    fmt.Println("Endpoint Hit: returnAllArticles")

    json.NewEncoder(w).Encode(articles)
}



type Tag struct {
    JN   string    `json:"jobno"`
    Title string `json:"title"`
}

func returnSingleArticle(w http.ResponseWriter, r *http.Request) {
    vars := mux.Vars(r)
    key := vars["id"]
    fmt.Fprintf(w, "Key: "+key)
}

func handleRequests() {
    myRouter := mux.NewRouter().StrictSlash(true)
    myRouter.HandleFunc("/", homePage)

    myRouter.HandleFunc("/all", returnAllArticles)  
    log.Fatal(http.ListenAndServe(":10000", myRouter))
}

func main() {
    handleRequests()
}

Обновление Я сейчас попробовал следующее ... Полностью переписал сайт и сервис на моем Macbook пробовал использовать разные порты на сервере и клиенте попытался запустить сервер на другой машине отключены все брандмауэры

ничего из этого не имеет значения.

1 Ответ

5 голосов
/ 29 апреля 2019

Вы не можете получить данные, потому что ваш браузер блокирует перекрестный HTTP-запрос от http://localhost:4200 до http://localhost:10000/all по соображениям безопасности.Ваш сервер Go должен иметь возможность обрабатывать предварительные OPTIONS запросы и отправлять в ответ правильные CORS заголовки.

Используйте gorilla/handlers ИЛИ rs/cors для включения поддержки CORS. 

import (
    "net/http"   
    "github.com/gorilla/mux"
    "github.com/gorilla/handlers"
    "github.com/rs/cors"              
)

func handleRequests() {
    myRouter := mux.NewRouter().StrictSlash(true)
    myRouter.HandleFunc("/", homePage) 
    myRouter.HandleFunc("/all", returnAllArticles)

    // Use rs/cors
    corsOptions := cors.New(cors.Options{
        AllowedHeaders: []string{"X-Requested-With", "Content-Type"},
        AllowedOrigins: []string{"*"}, // instead of '*' you can add the urls you want to allow e.g. 'http://localhost:4200'          
        AllowedMethods: []string{http.MethodGet, http.MethodPost, http.MethodPut, http.MethodPatch, http.MethodDelete, http.MethodOptions, http.MethodHead}
    })
    log.Fatal(http.ListenAndServe(":10000", corsOptions.Handler(myRouter))


    // OR use gorilla/handlers
    corsHeaders := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
    corsOrigins := handlers.AllowedOrigins([]string{"*"})
    corsMethods := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})
    log.Fatal(http.ListenAndServe(":10000", handlers.CORS(corsHeaders, corsOrigins, corsMethods)(myRouter)))
}

func main() {
    handleRequests()
}
...