javascript - 如何将特定本地主机路由中的 json 对象分配给 javascript 中的变量

Question

我是学习网络开发的新手，已经被困了几个小时，而且我对 Javascript 的了解也不是很好。我有一条路线 localhost:8080/api/employee/ 所以当我在浏览器中输入这条路线时它会显示一个 JSON

[
    {
        "id":1,
        "employee_name":"Anders",
        "department_id":4
    },
    { 
        "id":3,
        "employee_name":"Brownea",
        "department_id":17
    },
    {
        "id":4,
        "employee_name":"Chow",
        "department_id":19
    }
]

---

在更具体的路由中，localhost:8080/api/employee/{id}，例如显示id: 1

{data: 
    {
        "id":1,
        "employee_name":"Anders",
        "department_id":4
    }
}

---

我正在尝试将特定本地主机路由中的 json 对象分配给 javascript 中的变量。

目前问题是数字3

1. 在 javascript 中，我试过这个:

const fileHandler = async () => {
    const res = await fetch("localhost:8080/api/employee/1")
    .then((res) => {
        console.log(res)
    }
}

在控制台中显示:

XHRGEThttp://localhost:8080/api/employee/1
CORS Missing Allow Origin

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/api/employee/1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource. EmployeeRegis.js:34

1. 然后我尝试在 javascript 中执行此操作:

const res = await fetch("localhost:8080/api/employee/1", {
    method: "GET",
    mode: "no-cors",
})
.then((res) => {
    console.log(res)
}

控制台显示:

XHRGEThttp://localhost:8080/api/employee/1
[HTTP/1.1 404 Not Found 7ms]

Response { type: "opaque", url: "", redirected: false, status: 0, ok: false, statusText: "", headers: Headers, body: null, bodyUsed: false }
EmployeeRegis.js:34

1. 我也尝试了 mm107 答案并执行此操作:

const res = await fetch("http://localhost:8080/api/employee/1", {
    method: "GET",
    mode: "no-cors",
}).then(res => {
    console.log(res)
    console.log(res.json())
    res.json()
}).then(data => {
    console.log(data)
})

它仍然在控制台中返回一些错误:

Response { type: "opaque", url: "", redirected: false, status: 0, ok: false, statusText: "", headers: Headers, body: null, bodyUsed: false }
EmployeeRegis.js:37

Promise { <state>: "pending" }
<state>: "rejected"
<reason>: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
​​columnNumber: 0
fileName: ""
lineNumber: 0
message: "JSON.parse: unexpected end of data at line 1 column 1 of the JSON data"
stack: ""
<prototype>: SyntaxError.prototype { stack: "", … }
<prototype>: Promise.prototype { … }
EmployeeRegis.js:39

undefined EmployeeRegis.js:43

Uncaught (in promise) SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data 2

---

我使用 Golang 作为后端，这里是处理程序(使用 GoFiber 和 gorm):

func HandlerEmployeeID(ctx *fiber.Ctx) error {
    employeeID := ctx.Params("id")

    var emply entity.Employee

    error := database.DB.First(&emply, "id = ?", employeeID).Error
    if error != nil {
        return ctx.Status(404).JSON(fiber.Map{
            "message": "failed get employee by the id",
        })
    }
    // Previously in number 1 and 2, I pathetically return 404 status not found
    // return ctx.Status(404).JSON(fiber.Map{
    //  "message": "successfully get employee by the id",
    //  "data":    emply,
    // })
    
    // In the number 3, I have update it like this
    return ctx.JSON(fiber.Map{
        "message": "successfully get employee by the id",
        "data":    emply,
    })
}

---

我在 console.log(resSomething) 上想要的返回:

{data: 
    {
        "id":1,
        "employee_name":"Anders",
        "department_id":4
    }
}

怎么做？

---

更新:

我只知道 mode: "no-cors" 不会产生我预期的响应主体。但是，如果我不使用该模式，它将继续在控制台中返回错误。我尝试并行运行 lcp --proxyUrl http://localhost:8080/api/employee/1 但 CORS 问题仍未处理。

Answer 1

您必须解析对 JSON 的响应:

const res = await fetch("localhost:8080/api/employee/1", {
    method: "GET",
    mode: "no-cors",
})
.then(res => res.json())
.then(data => console.log(data))

对于 404，它可能是后端的一些问题。