无法读取属性未定义 [英] Cannot Read Property Undefined
问题描述
我已经在.NET Core MVC项目中创建了一个终结点.
I have created an endpoint in my .NET Core MVC project.
我的Api是:
[HttpGet("/api/notifications")]
public async Task<IActionResult> Notifications()
{
var user = await GetCurrentUserAsync(); // Gets the current logged user.
if (user == null)
return StatusCode(401);
var notifications = _notificationService.GetUserNotifications(user.Id);
var serialized = JsonConvert.SerializeObject(notifications);
return Ok(serialized);
}
我将SignalR用于数据库更改通知
And I'm using SignalR for Database Change Notifications
[HttpPost]
public async Task<IActionResult> CreateNotification(NotificationModel model)
{
var notification = new Notification()
{
NotificationTitle = model.NotificationTitle,
NotificationBody = model.NotificationBody,
DateTime = DateTime.UtcNow
};
_notificationService.Create(notification);
// Many to many relationship between Notifications and Users
// Many to Many table looks like => NotificationId | UserId | isRead
// So in this action, because of the notification is created for the first time,
// NotifyUsers method will set 'isRead' property to false.
_notificationService.NotifyUsers(notification, model.userIds);
//Here Notify the Clients with SignalR!
await _notificationHubContext.Clients.All.SendAsync("initSignal", "message");
return RedirectToAction("PublishedNotification", "Portal");
}
最后，我有了一个Javascript文件，我在其中控制数据来自SignalR的api.
and at last, I have a Javascript file where I'm controlling the data comes from api with SignalR.
notification.js
window.onload = () => notifyUser();
var connection = new signalR.HubConnectionBuilder().withUrl("/NotificationHub").build();
connection.on("initSignal", () => notifyUser());
connection.start().catch(function (err) {
return console.error(err.toString());
});
const endPoint = "http://{my-site}.com/api/notifications";
async function getNotifications() {
try {
var response = await fetch(endPoint);
var notifications = await response.json();
// Filters notifications where isRead properties are "false"
var unreadNotifications = notifications.filter(notification => !notification.isRead);
return { notifications, unreadNotifications };
} catch (e) {
console.error(e);
}
}
function notifyUser() {
var ul = document.getElementById("notification-list");
ul.innerHTML = "";
var notificationDropdownBtn = document.getElementById("notification-dropdown");
var initialNotificationLimit = 2;
notificationDropdownBtn.onclick = () => {
notifyUser();
}
getNotifications().then(notifications => {
let { unreadNotifications = [] } = notifications;
if (unreadNotifications.length > 0) {
var notificationControl = document.getElementById("notification-control");
notificationControl.textContent = unreadNotifications.length;
unreadNotifications.forEach((notification, index) => {
if (index > initialNotificationLimit) {
return;
}
ul.insertAdjacentHTML("beforeend", (createNotificationListItem(notification)));
});
var loadBtn = document.getElementById("load-more");
loadBtn.onclick = () => {
ul.innerHTML = "";
initialNotificationLimit += 3;
unreadNotifications.slice(0, initialNotificationLimit).forEach(notification =>
ul.insertAdjacentHTML("beforeend", (createNotificationListItem(notification))));
}
} else {
ul.insertAdjacentHTML("beforeend", "<span class='text-muted'>You don't have any unread notifications!</span>");
}
});
}
function createNotificationListItem(notification) {
var { NotificationId, NotificationBody, NotificationTitle, DateTime } = notification.Notification;
return `<li class="media">
<div class="mr-3 position-relative">
<img src="" width="36" height="36" class="rounded-circle" alt="">
</div>
<div class="media-body">
<div class="media-title">
//In this route, which goes to my Announcement Action in my .NET Core,
// which will set isRead property to "True"
<a href="/announcement/${NotificationId}">
<span class="font-weight-semibold">${NotificationTitle}</span>
<span class="text-muted float-right font-size-sm">${DateTime}</span>
</a>
</div>
<span class="text-muted">${NotificationBody.substring(0, 25)}...</span>
</div>
</li>`
}
好的，这是我的项目通知部分.
Ok, so this is my projects notifications part.
**错误/问题**
**ERROR / PROBLEMS **
当我发布带有FTP的站点时，出现控制台错误.
When I published my site with FTP, a Console error appeared.
但是主要的问题是，直到我的朋友告诉我通知存在错误和控制台错误，我才真正知道这是错误.因为在我的计算机上一切正常，然后我尝试在另一台朋友计算机上也可以正常工作，但是其他人告诉我，在他们的计算机上，他们遇到了此错误.
But the main problem is, till my friend told me that there is an error with notifications, and a console error, I didnt actually know that there was an error. Because on my computer everything was working, and I tried on another friends computer, and also working, but the others told me that on their computer, they got this error.
错误是
Cannot read property undefined 'unreadNotifications' => notification.js
我试图告诉他们删除浏览器的缓存历史记录，对于某些浏览器来说，它起作用了，而对于某些浏览器来说，则没有..
I tried to told them to remove browser cache history, for some of them it worked, and for some of them it didn't..
我真的被困在这里，我不知道怎么用谷歌搜索...
I really got stuck in here, I don't know how to google it...
注意:就您的信息而言，我的端点具有数据，并且我的操作或ef方法都可以正常工作...
NOTE: For your information, my endpoint has the data, and my actions or my ef methods are all working fine...
代码如何在其他计算机上以不同的方式工作，并且我也不知道如何 Google 这个问题，并且您可以理解我不是专家...
How can a code works differently in other computers, and also I didn't know how to Google this problem, and as you can understand I'm not an expert...
注意:我的Cors设置的最后一件事是:
NOTE: Last thing my Cors setup is:
services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
}));
编辑:如上所述，我尝试以同一用户身份在不同计算机上登录，当我在计算机上和其他计算机上键入"http://{my-site}/api/notifications"时，我得到了JSON对象(到目前为止有3条通知.)，但在其他计算机上，此 endpoint 返回一个空数组=> []
EDIT : I've tried to log in as the same user on different computers, as I've mentioned above, when I type "http://{my-site}/api/notifications", on my computer and some others , I got the JSON object (3 notifications so far.), but on the other computers this endpoint return an empty array => []
第二当我在浏览器上调试js文件时，这是我的回应，它无法访问设置为 HttpOnly 的 cookies >，我尝试使用 credentials:same-origin 获取，但实际上没有用.
Second EDIT : When I debugged my js file on browser, this is my response, it cant access the cookies which are set to HttpOnly, I tried to fetch with credentials:same-origin, didn't actually worked.
response =响应{类型:"cors"，网址:"{mysite} .com/account/login?ReturnUrl =％2Fapi％2Fnotifications"，已重定向:true，状态:200，确定:true，…}
推荐答案
使用AJAX解决，
错误是我从 js 文件中获取API，无法到达我的"Cookies"并返回
The Error was my fetch API from js file, couldn't reach my "Cookies" and return
options.AccessDeniedPath ="/account/accessdenied"; 在
services.ConfigureApplicationCookie .
当我调试 notification.js 响应对象是
response = Response {type: "cors", url: "{mysite}.com/account/login?ReturnUrl=%2Fapi%2Fnotifications", redirected: true, status: 200, ok: true, …}
如果将您的 Cookie 设置为 HttpOnly = true ，那么您将使它们无法从 client 辅助脚本访问.
If you set your Cookies to HttpOnly=true then you are making them unreachable from client side scripts.
因此，我在 .script 标签中的 .cshtml 下直接进行了Ajax调用，而我的Ajax调用是:
So, I've made an Ajax call directly under my .cshtml in a script tag and my Ajax call was:
function notifyUser() {
var ul = document.getElementById("notification-list");
ul.innerHTML = "";
var notificationDropdownBtn = document.getElementById("notification-dropdown");
var initialNotificationLimit = 2;
notificationDropdownBtn.onclick = () => {
notifyUser();
}
$.ajax({
type: "GET",
//In here I directly use my controller and action.
url: "@Url.Action("Notifications", "Portal")",
contentType: "application/json",
dataType: "json",
success: function (notifications) {
var unreadNotifications = notifications.filter(notification => !notification.isRead);
if (unreadNotifications.length > 0) {
...
} else {
...
},
error: function (req, status, error) {
console.error(error);
}
});
}
这篇关于无法读取属性未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
