I got lazy so used more pictures instead and I found good info from Codecademy.

CORS

Cross-Origin Resource Sharing(CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin(domain) have permission to access selected resources from a server at a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin(domain, protocol and port) than its own origin. It is for protecting users.

Most servers will allow GET requests but may block requests to modify resources on the server. Servers don’t just blindly block such requests though; they have a process in place that first checks and then communicates to the client (your web browser) which requests are allowed.

When a request is made using any of the following HTTP request methods, a standard preflight request will be made before the original request.

  • Put, Delete, Connect, Option, Trace, Patch

Preflight requests use the OPTIONS header. The preflight request is sent before the original request(that’s why it’s called “preflight.”) The purpose of the preflight request is to determine whether or not the original request is safe (for example, a DELETE request). The server will respond to the preflight request and indicate whether or not the original request is safe. If the server specifies that the original request is safe, it will allow the original request. Otherwise, it will block the original request.
Also, if any of the headers that are automatically set by your browser (i.e., user agent) are modified, that will trigger a preflight request.

CORS by Codecademy

XSS

A payload in API is the actual data pack that is sent with the GET method in HTTP.