title: How to resolve a CORS error on OKTA Hosted Signout
body: <p>I'm trying to add OKTA to my React application. I've gotten sign-in to work fine. But I'm struggling with Signout.</p>
  <p>Setup:
  I added OKTA to my project following <a href="https://developer.okta.com/docs/guides/sign-into-spa/react/before-you-begin/" rel="nofollow noreferrer">these instructions</a> from OKTA.</p>
  <p>This mostly worked, but included these instructions for invoking the sign-in</p>
  <pre><code>  const { authState, authService } = useOktaAuth();
    const login = () =&gt; authService.login('/profile');
  </code></pre>
  <p><code>authService</code> could not be found. So I went to the <a href="https://github.com/okta/samples-js-react" rel="nofollow noreferrer">OKTA Example</a> and changed it to</p>
  <pre><code>  const { authState, oktaAuth } = useOktaAuth();
    const login = async () =&gt; oktaAuth.signInWithRedirect();
  </code></pre>
  <p>This also means that</p>
  <pre><code>authService.signOut();
  </code></pre>
  <p>changed to</p>
  <pre><code>oktaAuth.signOut();
  </code></pre>
  <p>Problem:
  As I said above I'm able to login just fine. <code>authState.isAuthenticated</code> resolves to True.</p>
  <p>However when I try to sign out, React reports an &quot;Unhandled Rejection (AuthApiError)&quot; error:</p>
  <p><a href="https://i.stack.imgur.com/bKBkv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bKBkv.png" alt="enter image description here" /></a></p>
  <p>The console reports these errors:</p>
  <pre><code>Access to XMLHttpRequest at 'https://dev-7869221.okta.com/oauth2/default/v1/revoke' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  
  POST https://dev-7869221.okta.com/oauth2/default/v1/revoke net::ERR_FAILED
  
  Uncaught (in promise) AuthApiError
  </code></pre>
  <p>I cloned the OKTA example code down, and hard-coded in my application details. Login/Logout works just fine on the demo app. When I log out the configuration object, they match. So I conclude:</p>
  <ul>
  <li>My OKTA Application is configured correctly.</li>
  <li>The Sample app is doing something I haven't noticed</li>
  <li>The OKTA Documentation is out of date for these details.</li>
  </ul>
  <p>For completeness my source code and package.json are below.
  The application was created with <code>create-react-app</code> using the typescript template.</p>
  <pre><code>export const config = {
      clientId,
      issuer: `https://${domain}/oauth2/default`,
      redirectUri: 'http://localhost:3000/login/callback',
      scopes: ['openid', 'profile', 'email'],
      pkce: true,
      disableHttpsCheck: false,
  };
  
  const oktaAuth = new OktaAuth(config);
  
  const CALLBACK_PATH = '/login/callback';
  
  function App() {
      return (
          &lt;Router&gt;
              &lt;Security oktaAuth={oktaAuth}&gt;
                  &lt;Switch&gt;
                      &lt;Route path={CALLBACK_PATH} component={LoginCallback}/&gt;
                      &lt;Route path={'/'} component={Main} exact/&gt;
                      &lt;Route path={'/orgList'} component={OrgList}/&gt;
                  &lt;/Switch&gt;
              &lt;/Security&gt;
          &lt;/Router&gt;
      );
  }
  
  export default App;
  </code></pre>
  <pre><code>import React from 'react';
  import { useOktaAuth } from '@okta/okta-react';
  
  function Main() {
      const { authState, oktaAuth } = useOktaAuth();
  
      const login = async () =&gt; oktaAuth.signInWithRedirect();
      const logout = async () =&gt; oktaAuth.signOut();
  
      if( authState.isPending ) {
          return (
              &lt;&gt;
                  &lt;div&gt;Loading authentication...&lt;/div&gt;
              &lt;/&gt;
          );
      } else if( !authState.isAuthenticated ) {
          return (
              &lt;&gt;
                  &lt;div&gt;
                      &lt;button onClick={login}&gt;Login&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/&gt;
          );
      }
      return (
          &lt;&gt;
              &lt;button onClick={logout}&gt;Logout&lt;/button&gt;
          &lt;/&gt;
      );
  }
  
  export default Main;
  </code></pre>
  <pre><code>{
    &quot;name&quot;: &quot;okta-test-app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@okta/okta-auth-js&quot;: &quot;^4.5.0&quot;,
      &quot;@okta/okta-react&quot;: &quot;^4.1.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;web-vitals&quot;: &quot;^0.2.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.6&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.2.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.6.0&quot;,
      &quot;@types/jest&quot;: &quot;^26.0.19&quot;,
      &quot;@types/node&quot;: &quot;^12.19.9&quot;,
      &quot;@types/react&quot;: &quot;^16.14.2&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.10&quot;,
      &quot;@types/react-router-dom&quot;: &quot;^5.1.6&quot;,
      &quot;cross-env&quot;: &quot;^7.0.3&quot;,
      &quot;react-scripts&quot;: &quot;4.0.1&quot;,
      &quot;typescript&quot;: &quot;^4.1.3&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;cross-env PORT=3000 react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  </code></pre>