Cross-site post form submissions are forbidden

Cross-site form submissions involve submitting a form on a website to a different domain than the one the form is hosted on. This is typically done using JavaScript and can be useful in scenarios like single sign-on or when integrating third-party services.

However, due to security reasons, browsers have implemented a security policy known as the Same-Origin Policy. This policy prevents cross-site form submissions by default, meaning that a form hosted on one domain cannot be submitted to another domain without explicit consent.

To enable cross-site form submissions, the target domain must explicitly allow the origin domain in its server-side code. This can be achieved through various methods such as CORS (Cross-Origin Resource Sharing) headers or server-side proxying.

For example, let’s say we have a form hosted on “https://www.example.com/form.html” and we want to submit it to “https://api.example.com/submit”. By default, attempting to submit the form will result in an error like “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”.

To allow the cross-site form submission, the server hosting “https://api.example.com” needs to include the following response header:

      Access-Control-Allow-Origin: https://www.example.com
   

This header explicitly allows the origin “https://www.example.com” to submit forms to the “https://api.example.com” domain. Once the server includes this header, the form submission will be allowed and the data can be processed on the target domain.