In my ponentDidMount function I have a problem.

I'm facing error 401 in my Reactjs site, my username and password are correct.

ponentDidMount() {
    console.log("Json Datalog") fetch('185.213.180.129:9900/cgi-bin/datalog.json', {
        'mode': 'no-cors'
      }, {
        method: "GET",
        credentials: 'include',
        headers: {
          'Authorization': 'Basic ' + btoa(this.state.deviceSettings.userName + ":" + this.state.deviceSettings.password),
        }
      }).then((response) => {
          console.log("Btoa Encryption::::: ", btoa(this.state.deviceSettings.userName + ":" + this.state.deviceSettings.password))

In my ponentDidMount function I have a problem.

I'm facing error 401 in my Reactjs site, my username and password are correct.

ponentDidMount() {
    console.log("Json Datalog") fetch('185.213.180.129:9900/cgi-bin/datalog.json', {
        'mode': 'no-cors'
      }, {
        method: "GET",
        credentials: 'include',
        headers: {
          'Authorization': 'Basic ' + btoa(this.state.deviceSettings.userName + ":" + this.state.deviceSettings.password),
        }
      }).then((response) => {
          console.log("Btoa Encryption::::: ", btoa(this.state.deviceSettings.userName + ":" + this.state.deviceSettings.password))

• javascript
• reactjs
• react-native

• some headers might be missing? can you post the respective code? – Jai Commented Feb 10, 2020 at 13:26
• yes maybe something is missed – Abbass Commented Feb 10, 2020 at 13:28
• ponentDidMount() { console.log("Json Datalog") fetch('185.213.180.129:9900/cgi-bin/datalog.json', { 'mode': 'no-cors' }, { method: "GET", credentials: 'include', headers: { 'Authorization': 'Basic ' + btoa(this.state.deviceSettings.userName + ":" + this.state.deviceSettings.password), } }).then((response) => { console.log("Btoa Encryption::::: ", btoa(this.state.deviceSettings.userName + ":" + this.state.deviceSettings.password)) – Abbass Commented Feb 10, 2020 at 13:29
• if (response.ok) { return response.json() } return {} }).then((json) => { console.log(json, 'apex') this.extractApexParameters(json) }).catch((err) => { console.log(err) this.setState({ isFetchingProps: false }, () => { if (this.notification) { this.notification.showNotification(Unfortunately, we were unable to connect to device, true) } }) }) } – Abbass Commented Feb 10, 2020 at 13:29
• 2 that's not how SO works ... update the question with the relevant code - dont' post code in a ment – Jaromanda X Commented Feb 10, 2020 at 13:46

1 Answer 1

You're passing three arguments to fetch

effectively you are using fetch like

fetch('185.213.180.129:9900/cgi-bin/datalog.json', {
    mode: 'no-cors'
})

So your authentication header is not set at all

try this instead

fetch('185.213.180.129:9900/cgi-bin/datalog.json', {
    mode: 'no-cors',
    method: "GET",
    credentials: 'include',
    headers: {
      'Authorization': 'Basic ' + btoa(this.state.deviceSettings.userName + ":" + this.state.deviceSettings.password),
    }
  })

also, you need to understand what mode: 'no-cors' means - you will not have access to the response body if the request is not same origin - so forget reading the response as per the code in your ments (i.e. return response.json() ) - you will not get any access to the response using mode: 'no-cors'