title: Keycloak Introspection Endpoint
body: <p>I'm trying to access to introspect endpoint in my Keycloak server <em>/openid-connect/token/introspect</em> from my front app, but I get next error:</p>
  <pre><code>Access to fetch at 'http://localhost:8180/auth/realms/backoffice/protocol/openid-connect/token/introspect' from origin 'http://localhost:8080' 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. 
  If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  </code></pre>
  <p>Using Postman, curl or Node app this request works fine, but from my front-app using fetch method thows this error. I'm not sure it's possible query for introspect endpoint from front-app in the browser or if it's only possible from server app.</p>
  <p>Other endpoints like:</p>
  <ul>
  <li>openid-connect/token:</li>
  <li>openid-connect/userinfo:</li>
  </ul>
  <p>Works fine using the Postman JS code.</p>
  <h2>Keycloak config</h2>
  <p>My client in Keycloak has set up <strong><em>Web Origins *</em></strong> and <strong><em>Access Type confidential</em></strong>.</p>
  <p><a href="https://i.stack.imgur.com/Q57Sl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q57Sl.png" alt="Keycloak Config Client" /></a></p>
  <h2>Client Code</h2>
  <p>My front app is simply the Postman code JS, and I deploy it using node http-server.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
  
  var urlencoded = new URLSearchParams();
  urlencoded.append("client_id", "my-client");
  urlencoded.append("client_secret", "my-secret");
  urlencoded.append("token", "eyJ...oCA");
  
  var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: urlencoded,
    redirect: 'follow'
  };
  
  fetch("http://localhost:8180/auth/realms/backoffice/protocol/openid-connect/token/introspect", requestOptions)
    .then(response =&gt; response.text())
    .then(result =&gt; console.log(result))
    .catch(error =&gt; console.log('error', error));</code></pre>
  </div>
  </div>
  </p>
  <h2>Header Response</h2>
  <p>The header response in <strong>userinfo endpoint</strong> comes with Access-Control-Allow-Origin and Access-Control-Allow-Credentials but <strong>is not present in introspect endpoint</strong>.</p>
  <p><a href="https://i.stack.imgur.com/SMNK1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SMNK1.png" alt="enter image description here" /></a></p>