.NET Core 3.1 中对具有授权属性的操作的 AJAX 调用

本文介绍了.NET Core 3.1 中对具有授权属性的操作的 AJAX 调用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的

代码是开源的(

错误是:

试图喜欢一首歌词！govenda-sera:1 访问 XMLHttpRequest 'https://localhost:5006/connect/authorize?client_id=bejebeje-mvc-local&redirect_uri=https%3A%2F%2Flocalhost%3A5001%2Fsignin-oidc&response_type=code&范围=的OpenID&安培; code_challenge = 2mUDM3-gR1jhn7E2EY7T17FkPTHikE8v-KQOBMskazM&安培; code_challenge_method = S256&安培; response_mode = form_post&安培;随机数= 637437449511000684.OWQ3MTM4MjItOTJhOS00YjgzLTk1OTYtYWE2ZGUyMzRlYzUyOWE1MTkwNjgtNzI2YS00OWJjLTgzYjAtOTY1MDQ1ZDU3YzE1&安培;状态= CfDJ8DxKnFiqfK1HscY3j3s4hc-YvLoUa_X_46X1CclU7U-RahgrNQULQOLJu6943zTWCYa5Q5acO7g7vx03ddXSOOKkUtxZQAMHSgnQHFzBvhXnoC2i6yS0PpGxns7oA7tuvcgnp-jxub7RePZl5QAe5BwfXWkyHtMkFAmTkuultwz5w-Duenyb4KNrZRk1RLn6TLL93BS6YfIfoozorOnvKel4cFFjxIc7F_QXgVFKZm6ud5lN2nItw5WhkDfU6qMHhUUSQXQRJqWSit4CW_1hPpbHZhJmatXWxD8mLVFcSEKMNQz2UIU00RDxBCQW09Skuy3Uoz50Vwp4dEYPtNIcolIKrLn1pJguNsYRWBw391uWO7rMy9W5DPJV44fMVe8UR5xKNUarkelFX4CzHidF-RE&安培; X-客户SKU = ID_NETSTANDARD2_0&安培; X-client-ver=5.5.0.0'(重定向自 'https://localhost:5001/lyrics/like/938') 来自源 'https://localhost:5001' 已被 CORS 策略阻止:请求的资源上不存在 'Access-Control-Allow-Origin' 标头.govenda-sera:131 GET https://localhost:5006/connect/authorize?client_id=bejebeje-mvc-local&redirect_uri=https%3A%2F%2Flocalhost%3A5001%2Fsignin-oidc&response_type=code&scope=openid&code_challenge = 2mUDM3-gR1jhn7E2EY7T17FkPTHikE8v-KQOBMskazM&安培; code_challenge_method = S256&安培; response_mode = form_post&安培;随机数= 637437449511000684.OWQ3MTM4MjItOTJhOS00YjgzLTk1OTYtYWE2ZGUyMzRlYzUyOWE1MTkwNjgtNzI2YS00OWJjLTgzYjAtOTY1MDQ1ZDU3YzE1&安培;状态= CfDJ8DxKnFiqfK1HscY3j3s4hc-YvLoUa_X_46X1CclU7U-RahgrNQULQOLJu6943zTWCYa5Q5acO7g7vx03ddXSOOKkUtxZQAMHSgnQHFzBvhXnoC2i6yS0PpGxns7oA7tuvcgnp-jxub7RePZl5QAe5BwfXWkyHtMkFAmTkuultwz5w-Duenyb4KNrZRk1RLn6TLL93BS6YfIfoozorOnvKel4cFFjxIc7F_QXgVFKZm6ud5lN2nItw5WhkDfU6qMHhUUSQXQRJqWSit4CW_1hPpbHZhJmatXWxD8mLVFcSEKMNQz2UIU00RDxBCQW09Skuy3Uoz50Vwp4dEYPtNIcolIKrLn1pJguNsYRWBw391uWO7rMy9W5DPJV44fMVe8UR5xKNUarkelFX4CzHidF-RE&安培; X-客户SKU = ID_NETSTANDARD2_0&安培; X-客户-VER =5.5.0.0 网络::ERR_FAILED喜欢歌词

解决方案

你不能通过 AJAX 调用这个 URL 来登录用户:

https://localhost:5006/connect/authorize?..

如果您希望用户登录/验证，则需要将浏览器重定向到该页面.

或者更好的是，如果用户未登录，则不要显示心形图标，最好有一个登录按钮?否则用户可能会惊讶于他为什么需要登录.

On my pet project (a lyrics website), I wish to add "like" functionality, like this:

Code is open source (here's my current branch). A click on the heart icon should add a like to the databse for the logged in user, and if the user isn't logged in, it should redirect to the login page (IdentityServer 4, separate project and domain).

Controller Action:

[Authorize]
[Route("lyrics/like/{lyricId}")]
public async Task<IActionResult> Like(
  int lyricId)
{
  try
  {
    string userId = User.GetUserId().ToString();

    await _lyricsService.LikeLyricAsync(userId, lyricId);

    return RedirectToAction("Index", "Home");
  }
  catch
  {
    return RedirectToAction("Index", "Home");
  }
}

JavaScript on the View:

<script>
  docReady(function () {
    let likeBtn = document.getElementById('like-btn');

    let likeLyric = (event) => {
      event.preventDefault();
      console.log('attemping to like a lyric!');

      // 1. create a new XMLHttpRequest object
      let request = new XMLHttpRequest();

      // 2. configure the request
      request.open('GET', 'https://localhost:5001/lyrics/like/@Model.Id');

      // 3. send the request over the network
      request.send();

      // 4. this will be called after the response is received
      request.onload = function () {
        if (request.status != 200) {
          // analyse http status of the response
          alert(`Error ${request.status}: ${request.statusText}`);
        } else {
          // show the result
          alert(`Done, got ${request.response.length} bytes`); // response is the server response
        }
      };

      request.onprogress = function (event) {
        if (event.lengthComputable) {
          alert(`Received ${event.loaded} of ${event.total} bytes`);
        } else {
          alert(`Received ${event.loaded} bytes`); // no Content-Length
        }
      };

      request.onerror = function () {
        alert("Request failed");
      };
    }

    likeBtn.addEventListener('click', likeLyric);
  });
</script>

I tried to expand on the request.onload function by adding an:

else if (request.status === 302) {
  window.location = request.response;
}

But it doesn't seem to get to that, the .send() fails. What am I doing wrong here?

Here's a screen grab of what is happening:

The error is:

attemping to like a lyric!
govenda-sera:1 Access to XMLHttpRequest at 'https://localhost:5006/connect/authorize?client_id=bejebeje-mvc-local&redirect_uri=https%3A%2F%2Flocalhost%3A5001%2Fsignin-oidc&response_type=code&scope=openid&code_challenge=2mUDM3-gR1jhn7E2EY7T17FkPTHikE8v-KQOBMskazM&code_challenge_method=S256&response_mode=form_post&nonce=637437449511000684.OWQ3MTM4MjItOTJhOS00YjgzLTk1OTYtYWE2ZGUyMzRlYzUyOWE1MTkwNjgtNzI2YS00OWJjLTgzYjAtOTY1MDQ1ZDU3YzE1&state=CfDJ8DxKnFiqfK1HscY3j3s4hc-YvLoUa_X_46X1CclU7U-RahgrNQULQOLJu6943zTWCYa5Q5acO7g7vx03ddXSOOKkUtxZQAMHSgnQHFzBvhXnoC2i6yS0PpGxns7oA7tuvcgnp-jxub7RePZl5QAe5BwfXWkyHtMkFAmTkuultwz5w-Duenyb4KNrZRk1RLn6TLL93BS6YfIfoozorOnvKel4cFFjxIc7F_QXgVFKZm6ud5lN2nItw5WhkDfU6qMHhUUSQXQRJqWSit4CW_1hPpbHZhJmatXWxD8mLVFcSEKMNQz2UIU00RDxBCQW09Skuy3Uoz50Vwp4dEYPtNIcolIKrLn1pJguNsYRWBw391uWO7rMy9W5DPJV44fMVe8UR5xKNUarkelFX4CzHidF-rE&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.5.0.0' (redirected from 'https://localhost:5001/lyrics/like/938') from origin 'https://localhost:5001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
govenda-sera:131 GET https://localhost:5006/connect/authorize?client_id=bejebeje-mvc-local&redirect_uri=https%3A%2F%2Flocalhost%3A5001%2Fsignin-oidc&response_type=code&scope=openid&code_challenge=2mUDM3-gR1jhn7E2EY7T17FkPTHikE8v-KQOBMskazM&code_challenge_method=S256&response_mode=form_post&nonce=637437449511000684.OWQ3MTM4MjItOTJhOS00YjgzLTk1OTYtYWE2ZGUyMzRlYzUyOWE1MTkwNjgtNzI2YS00OWJjLTgzYjAtOTY1MDQ1ZDU3YzE1&state=CfDJ8DxKnFiqfK1HscY3j3s4hc-YvLoUa_X_46X1CclU7U-RahgrNQULQOLJu6943zTWCYa5Q5acO7g7vx03ddXSOOKkUtxZQAMHSgnQHFzBvhXnoC2i6yS0PpGxns7oA7tuvcgnp-jxub7RePZl5QAe5BwfXWkyHtMkFAmTkuultwz5w-Duenyb4KNrZRk1RLn6TLL93BS6YfIfoozorOnvKel4cFFjxIc7F_QXgVFKZm6ud5lN2nItw5WhkDfU6qMHhUUSQXQRJqWSit4CW_1hPpbHZhJmatXWxD8mLVFcSEKMNQz2UIU00RDxBCQW09Skuy3Uoz50Vwp4dEYPtNIcolIKrLn1pJguNsYRWBw391uWO7rMy9W5DPJV44fMVe8UR5xKNUarkelFX4CzHidF-rE&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.5.0.0 net::ERR_FAILED
likeLyric

解决方案

You can't do an AJAX call to this URL to login the user:

https://localhost:5006/connect/authorize?....

If you want the user to login/authenticate, then you need to redirect the browser to that page.

Or better, don't show the heart icon if the user is not logged in, better to have a login to like button? The user might otherwise be surprised why he needs to login.

这篇关于.NET Core 3.1 中对具有授权属性的操作的 AJAX 调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..