# Cors Problem w/ Widget

**URL:** <https://devforum.okta.com/t/cors-problem-w-widget/3077>\
**Category:** Questions\
**Created:** [October 11, 2018, 3:51pm UTC](https://devforum.okta.com/t/cors-problem-w-widget/3077 "2018-10-11T15:51:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![cmthomps](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/cmthomps/32/744_2.png) [@cmthomps](https://devforum.okta.com/u/cmthomps)\
**Post date:** [October 11, 2018, 3:51pm UTC](https://devforum.okta.com/t/cors-problem-w-widget/3077/1 "2018-10-11T15:51:31Z")

</div>

I’m having an issue using the Okta Sign-in widget. I have a proof of concept where I am getting an browser error that says:

Failed to load [https://dev-586182.oktapreview.com/oauth2/v1/authorize?client\_id=0...client-SKU=ID\_NET451&x-client-ver=5.2.0.0:](https://dev-586182.oktapreview.com/oauth2/v1/authorize?client_id=0...client-SKU=ID_NET451&x-client-ver=5.2.0.0:) Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘[http://localhost:62114](http://localhost:62114)’ is therefore not allowed access.

I have configured [http://localhost:62114](http://localhost:62114) and [http://localhost:62114/](http://localhost:62114/) as trusted origins for the API. The odd thing to me is that if I use the redirect flow (as opposed to the widget), it works fine.

I have also tested with the okta-aspnetcode-mvc-example code and that seems to work fine.

Any thoughts would be appreciated. This is my configuration for the widget:

```
   <script type="text/javascript">
        const signIn = new OktaSignIn({
            /**/
            baseUrl: 'https://dev-586182.oktapreview.com/'
            /**/
        });

        signIn.renderEl({ el: '#widget' }, (res) => {
            var sessionTokenField = $("#hiddenSessionTokenField");
            sessionTokenField.val(res.session.token);
            var form = sessionTokenField.parent();
            form.submit();
        }, (err) => {
            console.error(err);
        });
    </script>
```

---

<div class="post-metadata">

**Author:** ![laura.rodriguez](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/laura.rodriguez/32/611_2.png) [@laura.rodriguez](https://devforum.okta.com/u/laura.rodriguez)\
**Post date:** [October 11, 2018, 5:44pm UTC](https://devforum.okta.com/t/cors-problem-w-widget/3077/2 "2018-10-11T17:44:42Z")

</div>

Hi @cmthomps,

Have you followed all the steps recommended by our [quickstarts](https://developer.okta.com/quickstart/#/widget/nodejs/express)?

Do you have in your widget configuration the following params:

```auto
 var oktaSignIn = new OktaSignIn({
    baseUrl: "https://dotnet.oktapreview.com",
    clientId: "{clientId}",
    authParams: {
      issuer: "https://dotnet.oktapreview.com/oauth2/default",
      responseType: ['token', 'id_token'],
      display: 'page'
    }
  });

```

---

<div class="post-metadata">

**Author:** ![cmthomps](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/cmthomps/32/744_2.png) [@cmthomps](https://devforum.okta.com/u/cmthomps)\
**Post date:** [October 12, 2018, 12:28pm UTC](https://devforum.okta.com/t/cors-problem-w-widget/3077/3 "2018-10-12T12:28:49Z")

</div>

I am basing my proof of concept on this example: [https://github.com/oktadeveloper/okta-aspnetcore-mvc-example](https://github.com/oktadeveloper/okta-aspnetcore-mvc-example)

When I run that example, it works fine. When I run my proof of concept, I get the cors error.

---

<div class="post-metadata">

**Author:** ![laura.rodriguez](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/laura.rodriguez/32/611_2.png) [@laura.rodriguez](https://devforum.okta.com/u/laura.rodriguez)\
**Post date:** [October 12, 2018, 2:49pm UTC](https://devforum.okta.com/t/cors-problem-w-widget/3077/4 "2018-10-12T14:49:54Z")

</div>

Hey @cmthomps,

Unfortunately, that example is outdated.  
Please, take a look at our new examples repo for [ASP.NET](http://ASP.NET):

[https://github.com/okta/samples-aspnetcore](https://github.com/okta/samples-aspnetcore)  
[https://github.com/okta/samples-aspnet](https://github.com/okta/samples-aspnet)

Let me know how it goes after trying with these.

---

<div class="post-metadata">

**Author:** ![cmthomps](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/cmthomps/32/744_2.png) [@cmthomps](https://devforum.okta.com/u/cmthomps)\
**Post date:** [October 12, 2018, 3:02pm UTC](https://devforum.okta.com/t/cors-problem-w-widget/3077/5 "2018-10-12T15:02:17Z")

</div>

I don’t think those examples use the sign on widget.

---

<div class="post-metadata">

**Author:** ![laura.rodriguez](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/laura.rodriguez/32/611_2.png) [@laura.rodriguez](https://devforum.okta.com/u/laura.rodriguez)\
**Post date:** [October 12, 2018, 3:47pm UTC](https://devforum.okta.com/t/cors-problem-w-widget/3077/6 "2018-10-12T15:47:35Z")

</div>

If you go to the [resource-server](https://github.com/okta/samples-aspnetcore/tree/master/resource-server) example, there is a list of our front-end sample applications (Vue, React, and Angular) to demonstrate the interaction with the resource server.

For example, if you go to the [React](https://github.com/okta/samples-js-react) repo, you will see a custom-login example which uses the widget.

If you want to use the plain js widget, then try with the next configuration:

```auto
        var oktaSignIn = new OktaSignIn({
            baseUrl: "https://dev-586182.oktapreview.com/",
            clientId: "{clientId}",
            authParams: {
                issuer: "https://dev-586182.oktapreview.com/oauth2/default",
                responseType: ['token', 'id_token'],
                display: 'page'
            }
        });

```

You can see the full configuration/example in the [https://developer.okta.com/quickstart/#/widget/dotnet/aspnetcore](http://quickstart).

Also, in the [widget repo](https://github.com/okta/okta-signin-widget) you can find a lot of examples.

If you have set the right URL as your trusted origin, it should work. Double check that you have the right one.

 ![image](https://global.discourse-cdn.com/oktadev/original/1X/b5e5dc6d03e99b4faa588c710f0cba8a5e5824aa.png)

I am curious about how is your project structure? [ASP.NET](http://ASP.NET) Core web API + front-end?

---

<div class="post-metadata">

**Author:** ![cmthomps](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/cmthomps/32/744_2.png) [@cmthomps](https://devforum.okta.com/u/cmthomps)\
**Post date:** [October 12, 2018, 4:15pm UTC](https://devforum.okta.com/t/cors-problem-w-widget/3077/7 "2018-10-12T16:15:54Z")

</div>

> [@laura.rodriguez](#):
>
> [Okta Authentication Quickstart Guides | Okta Developer](https://developer.okta.com/quickstart/#/widget/dotnet/aspnetcore)

Thanks, I’m working on a [ASP.NET](http://ASP.NET) MVC project (not a Single Page App (SPA)). The examples all seem to be more geared to a Angular type of implementation. The example I had posted in my original message is closest to what I’m trying to do.

---

<div class="post-metadata">

**Author:** ![laura.rodriguez](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/laura.rodriguez/32/611_2.png) [@laura.rodriguez](https://devforum.okta.com/u/laura.rodriguez)\
**Post date:** [October 12, 2018, 4:47pm UTC](https://devforum.okta.com/t/cors-problem-w-widget/3077/8 "2018-10-12T16:47:02Z")

</div>

OK, so what you want to do is using a custom login page (using the widget) instead of the okta-hosted login page in your [asp.net](http://asp.net) mvc project?

if that is the case, then you want to see this example: [https://github.com/okta/samples-aspnetcore/tree/master/self-hosted-login](https://github.com/okta/samples-aspnetcore/tree/master/self-hosted-login)

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [January 13, 2024, 12:07am UTC](https://devforum.okta.com/t/cors-problem-w-widget/3077/9 "2024-01-13T00:07:55Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.