json - Can't Get Json to display in ag Grid 只是说正在加载
问题描述
使用我在网上找到的各种示例,我拼凑了一个简单的网络应用程序。然而,尽管 AG Grid(我选择显示数据的网格适用于提供的数据源,但它不适用于我自己的数据源,该数据源是使用 Go 编写的 Web 服务创建的。
角度代码...
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>
预期输出...
转到网络服务代码...
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 上的站点和服务尝试使用服务器上的不同端口,客户端尝试在另一台机器上运行服务器禁用所有防火墙
这些都没有任何区别。
解决方案
您无法获取数据,因为您的浏览器出于安全原因阻止了来自http://localhost:4200
to的跨域 HTTP 请求。http://localhost:10000/all
您的 Go 服务器必须能够处理预检OPTIONS
请求并在响应中发送正确的CORS标头。
使用gorilla/handlers
ORrs/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)
// ----- OPTION 1 ----- 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))
// --------------------------------
// ----- OPTION 2 ----- 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()
}
推荐阅读
- python - 从 Python 中的嵌套字典中按顺序排序和打印键和值
- javascript - 更改嵌套函数内的变量值
- c# - 如何使用 C# 9.0 新委托*将方法从 C# 9.0 正确发送到 C/C++ 库?
- java - 如何使用 Selenium 和 Java 从 Chrome 获取控制台日志
- javascript - 最多等待 N 秒以等待某事发生
- kubernetes - 使用 Kubernetes 容器原生负载均衡和 GCP Standalone NEG 实现网络负载均衡
- python-3.x - 在 python 中使用 selenium 查找特定标签
- javascript - 如何在 JavaScript 中扩展 HTML 元素列表?
- terraform - 使用 for_each 填写列表参数
- mysql - mysql的'where子句'bash脚本中的未知列