-1

I am currently working on a project, where I have to create the front end of an already existing backend project, this project already have the front end done with Angular, and I am trying to do the same thing using React, but lo link the front with the back I am not really sure how to.
this is the code of environment to link front with back from the Angular version.

export const environment = {
  production: true,
  backendURL: 'http://127.0.0.1:7778/',
  authentification : {
    username: 'user',
    password: 'c000000f-00a9-00c6-aff0-7b66d975d000',
    token: '##########################'
  }
};
adiga
  • 34,372
  • 9
  • 61
  • 83
ema
  • 21
  • 2

2 Answers2

0

You can fetch data using axios and send what credentials you want to get response.

Example:

axios.get(backendURL, {
    username: 'user',
    password: 'c000000f-00a9-00c6-aff0-7b66d975d000',
    token: '##########################'
  })
ELBEQQAL
  • 36
  • 2
  • 5
0

To established the communication between the frontend and the backend parts , you can use:

  • The fetch javascript native function , follow this example : fetch-example
  • Using an npm package like axios to make a http request : for that follow this example : axios example

I hope that can be halpful to resolve your issue.

rassakra
  • 1,062
  • 5
  • 9
  • this the code i used as a service import axios from 'axios' const GET_CUSTOMER_DETAILS_URL = 'http://127.0.0.1:7778/api/v1/getCustomerDetail?000000a-0a00-0000-00ec-00c01d129600'; class GetCustomerDetails { getCustomerDetails(){ return axios.get(GET_CUSTOMER_DETAILS_URL); } } export default new GetCustomerDetails(); – ema Apr 30 '21 at 10:11
  • yes, and what is the result returned by this function , use console.log to show what happen inside your function. – rassakra Apr 30 '21 at 10:14
  • Failed to load resource: the server responded with a status of 403 () Uncaught (in promise) Error: Request failed with status code 403 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:62) those two errors – ema Apr 30 '21 at 10:18
  • one thing , is that the back end is extracting informations from a wsdl file – ema Apr 30 '21 at 10:20
  • so you need on your back-end part convert the wsdl to json and check if it's working correctly using Postman after that implementit to your front-end part . – rassakra Apr 30 '21 at 10:24
  • i tested it using SOAPUI and it works perfectly, i know it works because it had no problem in the Angular version – ema Apr 30 '21 at 10:28
  • Both npm soap and easysoap are Node.js packages, which means that they run on the server but not on the client, where ReactJS lives. So, if you want to call a soap service from the client, you can try this example: https://stackoverflow.com/questions/124269/simplest-soap-example/11404133#11404133 of pure javascript or use a third-party tool like jquery-soap. Hope this helps :) – rassakra Apr 30 '21 at 10:30