Ignition 8 - Webdev - React front-end

I try to configure Webdev with Authentication. I build a front-end web application with React and try to reach my Webdev module. If I don’t use Authentication all works great, but with Authentication I don’t reach my module, I always received an 401 http error.

I have tried with fetch() and axios(). Below a code i’ve tried.

const token = window.btoa(${self.state.username}:${self.state.password})
let auth = 'Basic ’ + token
let h = new Headers();
h.append(‘Content-Type’, ‘application/json’);
h.append(‘Accept’, ‘application/json’);
h.append(‘Authorization’, auth);
const API = apiBaseUrl+“get_buffer?m”

fetch(API, {
withCredentials: true,
method: ‘GET’,
headers: h,
})

Hope that anybody can help me to fix that!

What Ignition version? Is there any content attached to the 401 result? Does the user you’re trying to authenticate as have any roles assigned? Are there any role restrictions on the endpoint you’re trying to reach?

Ignition 8, last webdev… 401 Unauthorized

Looks like you are not adding the Basic prefix before your encoded credentials in the Authorization header value
nvm misread

What specific Ignition version? Is there any content attached to the 401 response? Not just the error code, but an actual payload. You may need to change your fetch call to return the actual body. If it's got a body of "Access Denied", then that means the code reached a different place than if it doesn't have any content.

These last two questions are particularly important, because there's literally only one possible code path that could be resulting in a 401 unauthorized - I'm leaning towards there being a possible bug in the logic, but you're not giving me enough information to make sure.

I did another try with axios

const token = window.btoa(${self.state.username}:${self.state.password})
let auth = 'Basic ’ + token
let h = new Headers();
h.append(‘Content-Type’, ‘application/json’);
h.append(‘Accept’, ‘application/json’);
h.append(‘Authorization’, auth);

const API = apiBaseUrl+“get_buffer?m”

axios.get(API, {
withCredentials: true,
headers: h,
})

I got network error…
Access to XMLHttpRequest at ‘http://localhost:8088/system/webdev/Public_Script_DB/get_buffer?m’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

My doGet module in Wendev is:
lm=[]
results = system.tag.browse(path, filter = {})
for result in results.getResults():
test = system.tag.read(path + ‘/’ + result[‘name’] + ‘/data_store/export_state/pulse’)
if str(test.quality) == “Good”:
lm.append(result[‘name’])
return {‘json’: lm}

I mean, it's telling you what the problem is, and what to change. CORS is not an Ignition thing, it's a general web-development thing.

Now I got
xhr.js:178 GET http://localhost:8088/system/webdev/Public_Script_DB/get_buffer?m 401 (Unauthorized)

const token = window.btoa(${self.state.username}:${self.state.password})
let auth = "Basic " + token
let h = new Headers();
h.append(“Content-Type”, “application/json”);
h.append(“Accept”, “application/json”);
h.append(“Access-Control-Allow-Origin”, “http://localhost:8088”)
h.append(“Authorization”, auth);

const API = apiBaseUrl+"get_buffer?m"
axios.get(API, {
    headers: h,
})

My module only require Athentication without roles…

I try with my admin login

Do you have some codes you can provide me with credential conn?

Can you provide me an example of front-end login form to connect to the webdev ?

Hi Luc - are you still trying to get this to work? CORS sends a preflight OPTIONS request to see if cross origin requests are allowed by the remote server (Ignition in this example).

We recently updated the webdev module to allow each method to be able to set authentication independently, so an OPTIONS request could be done without authentication.

Handling this OPTIONS request is up to you.

Have you tried doing this in order to handle the expected CORS communication patterns? Ignition doesn’t have anything built in to do this for you, but I think the latest version of the WebDev module has the tools to allow you to properly service CORS requests. (I haven’t tried this myself, though, so I’m not 100% certain.)

Thanks, I will try

sorry Luc.
Did you manage to solve the cors problem within REACT when consuming the information from webdev?

Long time I’ved not played with REACT, but yes the CORS as resolved my issue.

How did you manage to solve the cors problem?

1 Like

Thanks, but due to company policies, extensions are not allowed. I solved it from the front end.
I am currently using react JS. but i have this error “Unhandled Rejection (TypeError): Cannot read properties of undefined (reading ‘JSON’)”

I will continue investigating and reviewing what my mistake is when consuming the information