Javascript Clients

I’ve just signed up for a cloud account, and I’m trying to create a javascript client on a local development site, but it doesn’t look like the API is allowing cross-site scripting.

I’m getting the following error:

SEC7120: [CORS] The origin ‘http://localhost:9090’ did not find ‘http://localhost:9090’ in the Access-Control-Allow-Origin response header for cross-origin resource at ‘[SQUIDEX API URL]’.

Are javascript clients supported by the API?

If CORS does not work, something went wrong, I will check it today.

I justed tested it with postman:

I’m getting the problem from the Get Content endpoint. eg:

https://cloud.squidex.io/api/content/[APP_NAME]/[SCHEMA]/[ID]

I’ll check my JavaScript code, it’s possible I’ve messed something up.

How to enable CORS for selfhosting? Queries to the SaaS Version work fine but i get CORS issues for selfhost:

squidex_1 | “exception”: {
squidex_1 | “type”: “System.InvalidOperationException”,
squidex_1 | “message”: “You must either set Authority or IntrospectionEndpoint”,
squidex_1 | “stackTrace”: " at Microsoft.AspNetCore.Builder.OAuth2IntrospectionOptions.Validate()\n at IdentityModel.AspNetCore.OAuth2Introspection.PostConfigureOAuth2IntrospectionOptions.PostConfigure(String name, OAuth2IntrospectionOptions options)\n at Microsoft.Extensions.Options.OptionsFactory1.Create(String name)\n at System.Lazy1.ViaFactory(LazyThreadSafetyMode mode)\n at System.Lazy1.ExecutionAndPublication(LazyHelper executionAndPublication, Boolean useDefaultConstructor)\n at System.Lazy1.CreateValue()\n at Microsoft.AspNetCore.Authentication.AuthenticationHandler1.InitializeAsync(AuthenticationScheme scheme, HttpContext context)\n at Microsoft.AspNetCore.Authentication.AuthenticationHandlerProvider.GetHandlerAsync(HttpContext context, String authenticationScheme)\nat IdentityServer4.Hosting.FederatedSignOut.FederatedSignoutAuthenticationHandlerProvider.GetHandlerAsync(HttpContext context, String authenticationScheme)\n atMicrosoft.AspNetCore.Authentication.AuthenticationService.AuthenticateAsync(HttpContext context, String scheme)\n at IdentityServer4.AccessTokenValidation.IdentityServerAuthenticationHandler.HandleAuthenticateAsync()\n at Microsoft.AspNetCore.Authentication.AuthenticationHandler1.AuthenticateAsync()\n at Microsoft.AspNetCore.Authentication.AuthenticationService.AuthenticateAsync(HttpContext context, String scheme)\n at Microsoft.AspNetCore.Authorization.Policy.PolicyEvaluator.AuthenticateAsync(AuthorizationPolicy policy, HttpContext context)\n at Microsoft.AspNetCore.Mvc.Authorization.AuthorizeFilter.OnAuthorizationAsync(AuthorizationFilterContext context)\n at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeFilterPipelineAsync()\n at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.InvokeAsync()\n at Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)\n at NSwag.AspNetCore.Middlewares.WebApiToSwaggerMiddleware.Invoke(HttpContext context)\n at Microsoft.AspNetCore.Builder.Extensions.MapMiddleware.Invoke(HttpContext context)\n at Squidex.Pipeline.RequestLogPerformanceMiddleware.InvokeAsync(HttpContext context, RequestDelegate next) in /src/Squidex/Pipeline/RequestLogPerformanceMiddleware.cs:line 32\n at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass5_1.<b__1>d.MoveNext()\n— End of stack trace from previous location where exception was thrown —\n at Squidex.Pipeline.EnforceHttpsMiddleware.InvokeAsync(HttpContext context, RequestDelegate next) in /src/Squidex/Pipeline/EnforceHttpsMiddleware.cs:line 43\n at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass5_1.<b__1>d.MoveNext()\n— End of stack trace from previous location where exception was thrown —\n at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)\n at Squidex.Pipeline.LocalCacheMiddleware.InvokeAsync(HttpContext context, RequestDelegate next) in /src/Squidex/Pipeline/LocalCacheMiddleware.cs:line 30\n at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass5_1.<b__1>d.MoveNext()\n— End of stack trace from previous location where exception was thrown —\n at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication`1 application)"
squidex_1 | },
squidex_1 | “app”: {
squidex_1 | “name”: “Squidex”,
squidex_1 | “version”: “1.0.0.0”,
squidex_1 | “sessionId”: “37f4288b-a980-4e46-9a2e-aaa8f3e65a4f”
squidex_1 | },

Can you provide a small sample?

I created a super simple sample and tested it:

  • With the cloud (other protocol: http vs https)
  • With the local development version (other port: 3100 vs 5000)

Sure: https://gist.github.com/bschulz87/69b037fcacb1a548ea29d2c78ef689ea

I also included my docker-compose.yml - i use Traefik with forced https.

After trying the /identity.server/connect/token to get a token i get this new errors:

squidex_1 | {
squidex_1 | “logLevel”: “Warning”,
squidex_1 | “message”: “CorsPolicyService did not allow origin: http://localhost:1234”,
squidex_1 | “origin”: “http://localhost:1234”,
squidex_1 | “app”: {
squidex_1 | “name”: “Squidex”,
squidex_1 | “version”: “1.0.0.0”,
squidex_1 | “sessionId”: “37f4288b-a980-4e46-9a2e-aaa8f3e65a4f”
squidex_1 | },
squidex_1 | “web”: {
squidex_1 | “requestId”: “d2092ece-e906-4351-bdcc-28688ba92990”,
squidex_1 | “requestPath”: “/connect/token”,
squidex_1 | “requestMethod”: “POST”
squidex_1 | },
squidex_1 | “timestamp”: “2018-11-18T11:49:18.1472664Z”,
squidex_1 | “category”: “IdentityServer4.Hosting.CorsPolicyProvider”
squidex_1 | }
squidex_1 |
squidex_1 | {
squidex_1 | “logLevel”: “Information”,
squidex_1 | “message”: “Invoking IdentityServer endpoint: IdentityServer4.Endpoints.TokenEndpoint for /connect/token”,
squidex_1 | “endpointType”: “IdentityServer4.Endpoints.TokenEndpoint”,
squidex_1 | “url”: “/connect/token”,
squidex_1 | “app”: {
squidex_1 | “name”: “Squidex”,
squidex_1 | “version”: “1.0.0.0”,
squidex_1 | “sessionId”: “37f4288b-a980-4e46-9a2e-aaa8f3e65a4f”
squidex_1 | },
squidex_1 | “web”: {
squidex_1 | “requestId”: “d2092ece-e906-4351-bdcc-28688ba92990”,
squidex_1 | “requestPath”: “/connect/token”,
squidex_1 | “requestMethod”: “POST”
squidex_1 | },
squidex_1 | “timestamp”: “2018-11-18T11:49:18.1510005Z”,
squidex_1 | “category”: “IdentityServer4.Hosting.IdentityServerMiddleware”
squidex_1 | }
squidex_1 |
squidex_1 | {
squidex_1 | “logLevel”: “Warning”,
squidex_1 | “message”: “Invalid HTTP request for token endpoint”,
squidex_1 | “app”: {
squidex_1 | “name”: “Squidex”,
squidex_1 | “version”: “1.0.0.0”,
squidex_1 | “sessionId”: “37f4288b-a980-4e46-9a2e-aaa8f3e65a4f”
squidex_1 | },
squidex_1 | “web”: {
squidex_1 | “requestId”: “d2092ece-e906-4351-bdcc-28688ba92990”,
squidex_1 | “requestPath”: “/connect/token”,
squidex_1 | “requestMethod”: “POST”
squidex_1 | },
squidex_1 | “timestamp”: “2018-11-18T11:49:18.1511207Z”,
squidex_1 | “category”: “IdentityServer4.Endpoints.TokenEndpoint”
squidex_1 | }
squidex_1 |
squidex_1 | {
squidex_1 | “logLevel”: “Information”,
squidex_1 | “elapsedRequestMs”: 4,
squidex_1 | “app”: {
squidex_1 | “name”: “Squidex”,
squidex_1 | “version”: “1.0.0.0”,
squidex_1 | “sessionId”: “37f4288b-a980-4e46-9a2e-aaa8f3e65a4f”
squidex_1 | },
squidex_1 | “web”: {
squidex_1 | “requestId”: “d2092ece-e906-4351-bdcc-28688ba92990”,
squidex_1 | “requestPath”: “/identity-server/connect/token”,
squidex_1 | “requestMethod”: “POST”
squidex_1 | },
squidex_1 | “timestamp”: “2018-11-18T11:49:18.1513713Z”
squidex_1 | }
squidex_1 |

I guess you have created a client in the settings, right? Can you create the token there?

Yes, i used this created token hardcoded. In Insomnia Client and GraphQL Playground the Token was valid.

Have you tested my sample? I don’t get the difference between development/cloud and docker.

EDIT: Does it also happen without traefik?

I tried your sample in code sandbox: https://codesandbox.io/s/mzm8qpj4l9

No haven’t tried without traefik so far because i did not want to to setup another reverse proxy just for one service.

But my sample kind of works, because it can retrieve a token. But of course the app and schema does not exist and therefore fails with a 404

1 Like

You are right, but it just worked for the sample-blog. I’m going to dig further now. Seems traefik is not the issue. Thanks so far!

Can you add your sample to the sandbox as well. I would like to check the network requests.

Will do this. The main difference i see so far is that axios sends the data for the token as JSON and Jquery sends Formdata.

But identity server only accepts form data: https://github.com/IdentityServer/IdentityServer4/blob/63a50d7838af25896fbf836ea4e4f37b5e179cd8/src/Endpoints/TokenEndpoint.cs#L64

Once i changed the request to send formdata it works: https://codesandbox.io/s/m3pp3on0jp

Good, but strange why you got such a strange error in your logs.

EDIT: I changed it to a json request and i got the following back: {"error":"invalid_request"}