qlik-demo-team / qdt-components

React Components to be used with Angular 10, React 16 and Vue 2. Connects with the Capability API and Engine API.
MIT License
92 stars 50 forks source link

Websocket error 301 + possible CORS error #51

Closed STPSjeto closed 4 years ago

STPSjeto commented 5 years ago

Hi All

I struggling to connect to our Qlik Sense Server through Angular 6. As seen below. When I run my mashup, Qlik asks for my username and password, so it is in touch with the server, but fails thereafter. It looks like I'm getting a websocket error and what looks like CORS errors on the require.js and css-files in the index.html. Does anyone know what I'm missing?

angular-qlik-qdt-error

My qdt-components.ts-file looks like this.

import { Component, OnInit, OnDestroy, ElementRef, Input } from '@angular/core';
import QdtComponents from 'qdt-components';

const options = {
  config: {
    host: '[domain redacted]',
    secure: false,
    port: 80,
    prefix: '/',
    appId: '8d2cef7f-d706-4551-a7d3-32ef47b2b3ce'
  },
  connections: {
    vizApi: true,
    engineApi: true
  }
};

const qdtComponents = new QdtComponents(options.config, options.connections);

@Component({
  selector: 'app-qdt-component',
  templateUrl: './qdt-component.component.html',
  styleUrls: ['./qdt-component.component.css']
})
export class QdtComponentComponent implements OnInit, OnDestroy {

  @Input() type: string;
  @Input() props: object;

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    qdtComponents.render(this.type, this.props, this.elementRef.nativeElement);
  }

  ngOnDestroy() {
    QdtComponents.unmountQdtComponent(this.elementRef.nativeElement);
  }
}

Thanks in advance for any tips/clues to what I'm missing :)

Kind regards

Jens

yianni-ververis commented 5 years ago

if you see in your ws connection, it has 2 slashes. remove the prefix in your config

change to prefix: ''

yianni-ververis commented 4 years ago

Closing due to inactivity, please reopen if you still have the issue