Detailed explanation of JS cross-domain POST implementation steps

This time I will bring you a detailed explanation of the steps to implement JS cross-domain POST. What are theprecautionsfor JS cross-domain POST implementation? Here are practical cases, let’s take a look.

javascriptCross-domain is a very common problem, among which jsonp is the most commonly used method, but jsonp only supports get, not post, so if you want to post some data through jsonp , the head is big.

Post is implemented by generating a form in an iframe, and returns the value to the caller through postMessage.

In the first step, we first implement a back-end code that accepts jsonp. As for what language to use for implementation, you decide for yourself.

c#The code is:

protected void Page_Load(object sender, EventArgs e) { StringBuilder sbRet = new StringBuilder(); sbRet.Append(""); Response.Write(sbRet.ToString()); Response.End(); }

For example, what you want to return to me is { userName:'user1', password:'pass1' } , when I call http://localhost/test When ?jsoncallback=callme

you actually return.

The second step is to build a post test page in the local folder, such as d:\test.html

The third step is to browse and click submit to see if the returned value is < ;script>callme({ userName:'user1', password:'pass1' })means there is no problem with the back-end program.

The fourth step, we write a general code to implement the above html.

The fifth step, security issues,

window.onmessage = function(e) { //可通过 e 来判断来源，并做一些安全方面的处理，此处读者自己去研究吧，可以加个 console.log(e) 看看 e 有哪些内容。 if (callback) callback(e.data); }

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

react-navigation usage summary (with code)

Common addition, deletion, modification and query operations of JS DOM elements Detailed explanation

The above is the detailed content of Detailed explanation of JS cross-domain POST implementation steps. For more information, please follow other related articles on the PHP Chinese website!