# Enable CORS- use web dev API for reactjs **URL:** \ **Category:** Ignition\ **Created:** [November 23, 2021, 7:13pm UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402 "2021-11-23T19:13:09Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Ricardo\_Sanchez](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@Ricardo\_Sanchez](https://forum.inductiveautomation.com/u/Ricardo_Sanchez)\ **Post date:** [November 23, 2021, 7:13pm UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/1 "2021-11-23T19:13:09Z")
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 ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [November 23, 2021, 7:31pm UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/2 "2021-11-23T19:31:57Z")
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. > [@Enable CORS for WebDev](https://forum.inductiveautomation.com/t/enable-cors-for-webdev/38655/4): > > Your actual response headers will change based on the input request and what you want to allow it to do. The basic structure should be something like this: from javax.servlet.http import HttpServletResponse servletResponse = request["servletResponse"] servletResponse.addHeader(someCorsHeaders, someCorsValue) # other headers based on incoming request servletResponse.setStatus(HttpServletResponse.SC\_NO\_CONTENT) See [Cross-Origin Resource Sharing (CORS) - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) for reference on what to send… ---
**Author:** ![Ricardo\_Sanchez](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@Ricardo\_Sanchez](https://forum.inductiveautomation.com/u/Ricardo_Sanchez)\ **Post date:** [December 9, 2021, 4:19pm UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/3 "2021-12-09T16:19:25Z")
Thank you but I solved it using .net and angular to collect information in real time ---
**Author:** ![Tomas\_Malio](https://avatars.discourse-cdn.com/v4/letter/t/d07c76/32.png) [@Tomas\_Malio](https://forum.inductiveautomation.com/u/Tomas_Malio)\ **Post date:** [October 23, 2023, 11:26am UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/4 "2023-10-23T11:26:38Z")
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 ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [October 23, 2023, 11:39am UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/5 "2023-10-23T11:39:16Z")
Case sensitivity, perhaps? `content-type` versus `Content-Type` ? ---
**Author:** ![Tomas\_Malio](https://avatars.discourse-cdn.com/v4/letter/t/d07c76/32.png) [@Tomas\_Malio](https://forum.inductiveautomation.com/u/Tomas_Malio)\ **Post date:** [October 23, 2023, 11:44am UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/6 "2023-10-23T11:44:10Z")
No, I've checked this out: ```auto 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; }); ``` ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [October 23, 2023, 2:27pm UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/7 "2023-10-23T14:27:20Z")
> [@Tomas\_Malio](#): > > Access-Control-Allow-Headers in preflight response. Are you implementing OPTIONS, as mentioned? What does your code look like if so? ---
**Author:** ![Tomas\_Malio](https://avatars.discourse-cdn.com/v4/letter/t/d07c76/32.png) [@Tomas\_Malio](https://forum.inductiveautomation.com/u/Tomas_Malio)\ **Post date:** [October 23, 2023, 2:37pm UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/8 "2023-10-23T14:37:33Z")
Hi, The code looks like this: ```auto 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 ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [October 23, 2023, 3:05pm UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/9 "2023-10-23T15:05:22Z")
Can you get a Wireshark capture from the client device and see the exact requests it's issuing and the responses it's getting? ---
**Author:** ![Tomas\_Malio](https://avatars.discourse-cdn.com/v4/letter/t/d07c76/32.png) [@Tomas\_Malio](https://forum.inductiveautomation.com/u/Tomas_Malio)\ **Post date:** [October 23, 2023, 3:34pm UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/10 "2023-10-23T15:34:02Z")
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. ---
**Author:** ![jcjc74836](https://avatars.discourse-cdn.com/v4/letter/j/439d5e/32.png) [@jcjc74836](https://forum.inductiveautomation.com/u/jcjc74836)\ **Post date:** [November 2, 2023, 3:50pm UTC](https://forum.inductiveautomation.com/t/enable-cors-use-web-dev-api-for-reactjs/53402/11 "2023-11-02T15:50:32Z")
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?.