使用 javascript 复制表单注销提交功能答案

【问题标题】：Replicate form logout submit functionality with javascript使用 javascript 复制表单注销提交功能
【发布时间】：2021-02-21 00:49:04
【问题描述】：

我有一个正常工作的注销按钮，可以成功结束使用 Express 服务器 ExpressOIDC/express-session 建立的会话。 OIDC 会话和用户被重定向到注销的视图。此处显示注销按钮 html：

<form v-if="authenticated" method="POST" action="/logout" id="auth-logout-form" v-cloak>
  <span class="user-name">{{userName}}</span>
  <input type="submit" value="Logout" />
</form>

我只是想在我的代码中模仿这个函数来进行非活动注销。

首先我尝试了一个简单的$.post('logout')。但这会产生以下错误：

在“https://xxxxxxxx.oktapreview.com/oauth2/default/v1/logout?id_token_hint=xxxxxxxxx&post_logout_redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F”处访问 XMLHttpRequest（重定向自“https://来自源“https://localhost:3000”的 localhost:3000/logout') 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：不存在“Access-Control-Allow-Origin”标头在请求的资源上。 jquery.min.js:2

GET https://xxxxxx.oktapreview.com/oauth2/default/v1/logout?id_token_hint=XXXXXXXXXXXXXXXX&post_logout_redirect_uri=https%3A%2F%2Flocalhost%3A3000%2Fnet::ERR_FAILED

然后我尝试了这个 ajax 调用：

if (this.currSeconds >= 5 && this.authenticated === true) {
  // this.logoutOIDC
  $.ajax({
    url: 'logout',
    method: "POST",
    headers: {
      'Access-Control-Allow-Origin': 'https://localhost:3000/',
    },
    type: 'dataType',
    /* etc */
    success: function(jsondata) {
      console.log(jsondata)
    },
  })
}

这会产生同样的错误。

当然，“$('#auth-logout-form').trigger('submit')” 效果很好，但它似乎不是正确的方法，我相信这会使注销功能很容易被禁用。

【问题讨论】：

标签： ajax forms vue.js openid-connect express-session

【解决方案1】：

如果我要使用中间件，Okta 的建议是继续使用 $('#auth-logout-form').trigger('submit')。可能还有其他方法，但这种方法适合当时的情况。

【讨论】：