(Inspired by cross-domain-with-koa)
- Edit your host file(on *nix system it's
/etc/hosts, on Windows it'sC:\Windows\System32\drivers\etc\hosts), make sure you have
127.0.0.1 foo.com
127.0.0.1 baz.foo.com
127.0.0.1 bar.com
in it. 2. Make sure the port 80 on your computer can be accessed. 3. Download/clone this repo, run
yarn install
- run
npm startand visithttps://foo.com(usesudoon *nix system because the port 80)
Visit https://foo.com/demo/cors, fill in some Id(or don't), and GET/POST your data. Open the network tab in your Dev Tools and you will see it uses CORS to GET/POST data from https://foo.com to https://bar.com.
If you check the preflight checkbox when you are POSTing data, you can see how the preflight CORS works. If you don't check it, you can see how it's done using simple CORS(without application/json as Content-Type).
Visit https://foo.com/demo/jsonp, fill in some Id(or don't), and GET your data from https://bar.com. Open your Dev Tools and you can see what the response looks like in the network tab, and what the request looks like in your DOM inspector(look for the <script> tag in the <head>).
Visit https://foo.com/demo/domain, fill in some Id(or don't), and GET/POST your data from/to https://baz.foo.com. Find the hidden <iframe>, check it's contentDocument.domain, and check the document.domain of the web page. Look into the source code of domain.js and iframe.js to see how it works.
Visit https://baz.foo.com/demo/domain, and repeat the steps above.
Visit https://foo.com/demo/message fill in some Id(or don't), and GET/POST your data from/to https://bar.com. Look into the source code of message.js and message-iframe.js to see how it works.