Encountering an unsecured WebSocket connection when trying to access the Neo4J endpoint post deployment on Firebase

I have developed an application using Neo4j, but when I try to host the app in Firebase, I encounter the following error:

The page at 'https://yourwebsite.com' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://ec2-18-140-45-111.ap-southeast-1.compute.amazonaws.com:7687/'. This request has been blocked; this endpoint must be available over WSS.

Here is a snippet of my code:

  draw() {
    const config = {
      container_id: "viz",
      server_url: "bolt://ec2-18-140-45-111.ap-southeast-1.compute.amazonaws.com:7687",
      server_user: "neo4j",
      server_password: "Password",
      labels: {
      },
      relationships: {
      },
      initial_cypher: "QUery",
      arrows: true
    }
    this.viz = new NeoVis.default(config);
    this.viz.render();
  }

How can I resolve this issue?

Your assistance would be greatly appreciated.

Answer №1

If you're looking to connect to your Neo4j server, you must either disable encryption by passing encryption:false or provide the necessary certificates.

For more information, check out:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a CORS header issue when using socket.io and nodejs on an apache2 server

I am currently learning how to implement socket.io within Laravel, but I am encountering an error that says Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3001/socket.io/?EIO=3&transport=p ...

Creating actions safely with redux typesafety

I've made a mistake several times by forgetting to properly extract the connected action creator from props, as shown below: import {actionCreator} from 'my-actions'; interface Props { actionCreator: typeof (actionCreator); } const Foo: ...

Encountering a 404 error while trying to deploy a React app on Verc

After deploying my React project with TypeScript using Vite, everything is working smoothly. However, I am encountering a 404 error when trying to refresh the page. Error: 404 NOT_FOUND Error Code: NOT_FOUND ...

How to optimize and reduce bundle size in Webpack using tree-shaking, babel-loader, TypeScript tsconfig target configuration, @babel/preset-env with modules set to false, and setting side

Looking to implement the tree-shaking feature of Webpack for es6-modules or ESM (.ejs)? Here's a detailed breakdown: My goal is to configure tree-shaking with Webpack v5 using babel-loader (adjustable from webpack.*.config.js), Babel v7 with @babel ...

Issue with ngfactory.js warning in Angular 6+ when building in production mode, but the development build is running without any

I am encountering an error while trying to build Angular for production. Can someone please provide a solution to this issue? WARNING in ./src/app/userforms/login/login.component.ngfactory.js 149:679-708 "export 'MAT_PROGRESS_BAR_LOCATION' (impo ...

Angular 8 carousel featuring a dynamic bootstrap 4 design with multiple images and cards displayed on a single slide

I am currently working on a dynamic carousel that should display multiple cards or images in one row. Initially, I faced an issue with the next and previous buttons not functioning properly when trying to display multiple cards in one row. After some onlin ...

How can you personalize the dropdown button in dx-toolbar using DevExtreme?

Currently, I am working with the DevExtreme(v20.1.4) toolbar component within Angular(v8.2.14). However, when implementing a dx-toolbar and specifying locateInMenu="always" for the toolbar items, a dropdown button featuring the dx-icon-overflow i ...

Troubleshooting Cloud Functions: Fixing functions.logger.log not Functioning

Whenever a user updates the chat/{id} documents, this function is triggered. const functions = require("firebase-functions"); exports.onChangedChat = functions.firestore .document('chat/{id}') .onWrite((change, context) => { fun ...

Avoid utilizing the i18n angular tool to translate any individual words within the string

For my internationalization application, I am using i18n angular. I am trying to figure out how to translate a string while keeping one word in the middle intact. This word might be an abbreviation or the name of a company. For example, when translatin ...

A Typescript function will only return a partial if the parameter passed into it is also

I have a function that takes a camelCase object and returns the same object in snake_case format. // Let's consider these types interface CamelData { exempleId: number myData:string } interface SnakeData { exemple_id: number my_data: stri ...

typescript: define the type of an object that behaves like a map

My current approach involves utilizing an object to store a map, where keys are strings and values are of a fixed type T. Upon looking up a key in the object, the type inference automatically assigns it the type T. However, there is a possibility that it ...

Issue encountered: The differ cannot recognize the provided object '[object Object]', which is of type 'object'. NgFor is limited to binding Iterables only

I have been following a tutorial on Ionic created by Paul Halliday, focusing on a shopping list project that utilizes Firebase and Angular. However, I am encountering an error every time I try to run the application: Error: Uncaught (in promise): Error: ...

Navigating to a different page in Ionic 2 when a link or button is clicked

When I click on the link provided below, it should take me to the home page. However, I am facing issues and it is not redirecting me as expected. I want to be taken to the home page when clicking on the specified link or button. Do I need to add any Ang ...

Objects vanish 10 seconds after appearing [Angular2, *ngFor]

My Angular2 template is quite straightforward: <span *ngFor="let item of items"> {{ item.description }} </span> Here is the TypeScript logic for it: let list = new Map(); for(let j = 0; j < 100; j++) { list.set(j, { description: j.toS ...

Unlocking 'this' Within a Promise

I seem to have an issue with the 'this' reference in the typescript function provided. It is not correctly resolving to the instance of EmailValidator as expected. How can I fix this so that it points to the correct instance of EmailVaildator, al ...

Display a modal dialog using HttpInterceptor

@Injectable() export class MyInterceptor implements HttpInterceptor { intercept(req : HttpRequest<any>, next : HttpHandler) : Observable<HttpEvent<any>> { //display a modal dialog to wait for user response before proceeding with t ...

Determine the subtotal for a particular item using AngularJS

Is there a way to apply the sub total amount to a specific item only? Currently, in my stackblitz example, when I add a new item and change the quantity of that last item, all recently added items also get updated. I want to modify the "changeSubtotal()" ...

Having trouble with Socket.io sending data to a specific socketId?

I'm currently using Socket.Io 1.7.3 with Angular 2, connecting to a ExpressJS Server. I'm facing an issue where I am unable to send packages to a specific socket ID even though they are a match. Server code snippet: socket.on('subscribeNot ...

Is it possible to configure npm to publish to an organization different from the one automatically detected from package.json?

We are looking to implement a process in our open source project where all Pull Requests will be published to npm using CI/CD. To reduce the potential for supply chain attacks, we aim to deploy to a separate organization. Can this be achieved without makin ...

Establishing visual properties for inactive Mat-Expansion Panels

Is there a way to customize the appearance of a disabled Mat-Expansion-Panel? I have buttons in the header that toggle the panel, so I'm considering disabling the panel itself instead. However, when I disable the panel, all the items inside are greyed ...