0

我在 React 中开发我的 Teams 应用程序并托管在 Azure App 服务器上。应用程序的支持是具有 oauth2 流的外部方。当我在 Teams 中测试我的代码时，我可以从后端看到登录屏幕，但是在输入用户名和密码后，它开始抛出以下错误：

未捕获的 DOMException：阻止具有源“https://backend-External-Server.com”的框架访问跨域框架。

我真的坚持这个。我的 React 应用程序运行良好，即使在 Teams 中我已经拥有访问令牌。所有其余的 api 调用都很完美。出现登录屏幕后出现问题。我正在使用 Teams Toolkit 创建选项卡并在 React 中对身份验证部分进行编码。

登录页面代码：

import React from "react";
import "./Login.css";
import { Authentication } from "../app/services/AuthService/auth";

export default function Login() {
  const auth = new Authentication();
  return <div className="center-screen">
    <div className="row">
      <span className="column">You'll need to sign in to use this app.</span>      
    </div>
    <div className="row">
      <span className="column"> <input type="button" value="Sign in" className="button" onClick={() => window.open(auth.getLoginUrl(), '_self')} /> </span>
    </div>
  </div>;
}

应用重定向代码：

import React, { ReactElement } from "react";
import { useState, useEffect } from "react";
import { Authentication } from "../app/services/AuthService/auth";
import Tab from './Tab';
import NoAccess from './NoAccess';
import { Redirect } from "react-router-dom";
import Spinner from "../app/services/Common/spinner";

export default function AppRedirect() {  
 let auth: Authentication = new Authentication();
 const [valid, setValid] = useState(false);
 
 useEffect(() => {
  if (!valid) {
      getToken();
  }
}, []);

const getToken = async () => {
    var valid = await auth.redirectCallBack();
    setValid(valid);
  };
  
  return <div> {valid ?  <Redirect to={auth.PathToRedirect} /> : <div><Spinner/></div> }</div>; 

}
4

1 回答 1

0

为了获得更多可见性，请从评论部分添加答案：

通过遵循此[MS doc 链接]解决了该问题

于 2021-12-14T05:48:19.697 回答