google-chromecorssiemens

How to write CORS Extension Rule for Preflight Error

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: enter image description here

Siemens App Debugger Screenshot: enter image description here

Solution

  • You 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:

    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: