Enable CORS- use web dev API for reactjs

Ignition
1

I have a question about the consumption of information with API.
generate an API in web dev at the time of testing in postman everything is fine

but when consuming it in react it throws me the following error:
Access to fetch at ‘from origin’ http: // localhost: 3000 ‘has been blocked by CORS policy: No’ Access-Control-Allow-Origin 'header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

some solution without using chrome extensions is frontend or ignition server problem

2

As previously mentioned, you have the ability to return your own OPTIONS headers in Webdev. You have to write the code yourself to return the right header values. If you have some code written and it's not working, provide your code.

You're looking for a single solution to a problem for which there is no single solution. The right CORS headers to use are going to depend on your application. You must do the research yourself.

2 Likes
3

Thank you
but I solved it using .net and angular to collect information in real time

4

Hi, I've the same problem like Ricardo.
We've created different kind of services for POST and GET but when we create a POST with a body the Ignition response:
Has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

I didn't find any solution in all the forum and we tried all your post and suggestions of how to create the script in Ignition but nothing happen.

Can you help me with this?

Our platform is made in React JS calling the services with axios POST method, headers content-type application/json.

Talk you soon,
Tom

5

Case sensitivity, perhaps? content-type versus Content-Type ?

6

No, I've checked this out:

const postData = await axios({
      method: 'POST',
      data,
      headers: {
        'Content-Type': 'application/json',
      },
      url: API_URL,
    })
      .then(response => {
        // If the response status was 200
        if (response.status === 200) {
          return response;
        } else {
          return "There's an error (" + postData.status + '). Please check later.';
        }
      })
      .catch(error => {
        return 'Something happened with the web services. ' + error;
      });
7

Are you implementing OPTIONS, as mentioned? What does your code look like if so?

8

Hi,
The code looks like this:

def doOptions(request, session):
    servletResp = request['servletResponse']
    servletResp.setHeader('Access-Control-Allow-Origin', '*')
    servletResp.setHeader('Content-Type', 'application/json;charset=utf-8')
    servletResp.setHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE')
    return None

HTTP Method doOptions Enabled.

That's the script in Ignition

9

Can you get a Wireshark capture from the client device and see the exact requests it's issuing and the responses it's getting?

10

We don't have a Wireshark. At the beginning appears a message that Request OPTIONS 501 Not implemented.
We change the doPost to doOptions. The problem continues and appears a message:

Has been blocked by cors policity request header field content-type is not allowed by access-control-allow-headers in preflight response.

We added a Access-Control-Allow-Headers: * but right now the answer of Ignition is slow and appears a network slow message.

11

Are you trying to read tags from a React project to the ignition gateway? probably is not the best way to do that,if you want to show actual values (means every second), or what are you trying to read or write?.