Using Chrome browser with CORS Extension on Win10. I have written a browser app (Angular 14) that I will only run on my LAN (localhost) and access a web server hosted on a Siemens LOGO 8.4 PLC (also on my LAN). I cannot alter the web server, to add headers. Siemens has a browser app (Soft Comfort) that accesses the web server, and I want to reverse engineer that so I can have my app send my PLCs (multiple LOGO 8.4 PLCs) commands. When I login to a PLC using Siemens app using Firefox without CORS Extension, I see the debugger screenshot below. When I run my app, which does a POST following same technique I get console error Access to XMLHttpRequest at 'http://192.168.0.3/login/guest/challenge' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource..
The CORS Extension screenshot below shows how I've defined a rule, to avoid the Preflight error, but it isn't working.
How can I write a CORS Extension rule to prevent the error?
Thanks!
CORS Extension Screenshot:
Siemens App Debugger Screenshot:
Using Chrome browser with CORS Extension on Win10. I have written a browser app (Angular 14) that I will only run on my LAN (localhost) and access a web server hosted on a Siemens LOGO 8.4 PLC (also on my LAN). I cannot alter the web server, to add headers. Siemens has a browser app (Soft Comfort) that accesses the web server, and I want to reverse engineer that so I can have my app send my PLCs (multiple LOGO 8.4 PLCs) commands. When I login to a PLC using Siemens app using Firefox without CORS Extension, I see the debugger screenshot below. When I run my app, which does a POST following same technique I get console error Access to XMLHttpRequest at 'http://192.168.0.3/login/guest/challenge' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource..
The CORS Extension screenshot below shows how I've defined a rule, to avoid the Preflight error, but it isn't working.
How can I write a CORS Extension rule to prevent the error?
Thanks!
CORS Extension Screenshot:
Siemens App Debugger Screenshot:
Share Improve this question asked Mar 19 at 1:04 BobCBobC 3712 gold badges6 silver badges19 bronze badges1 Answer
Reset to default 1You have it the other way around.
The Access-Control-Allow-Origin should contain your browser app origin that is making the request. (where the request originated)
So your rule becomes:
Access-Control-Allow-Origin: http://localhost:4200
As for the other headers, you will need to specify it based on the request you are sending.
If your request triggers preflight, then you will need to configure these 2 headers:
Access-Control-Allow-Methods- in this case the value will be POST, since you are making POST request
Access-Control-Allow-Headers- if you are sending any custom headers outside of the CORS safelisted headers
If you are sending credentialed request, which means you are sending either the Authorization or Cookie header, then you will need to configure this header:
Access-Control-Allow-Credentials- set to true if using credentials