JavaScript cross-domain and solutions
May 30, 2021 Article blog
Table of contents
1. What is cross-domain
We often use ajax on the page to request access to data from other servers, at which point clients have cross-domain issues.
Cross - domain problems are caused by homologous policies in javascript language security restrictions.
Simply put, a homologous policy is a script that reads only the properties of windows and documents from the same source, where the same source refers to a combination of host name, protocol, and port number.
For example:
2. Implementation principle
In HTML DOM, Script tags can access data on the server across domains. Therefore, you can specify the src property of the script as the url across domains, thus enabling cross-domain access.
For example:
This type of access is not possible. But in the following way, it is possible.
Here is a requirement for the returned data, that is, the data returned by the server cannot be simply such as "Name": "zhangsan".
If this json string is returned, there is no way we can invoke it. Therefore, the value that is required to be returned must be var json, "Name": "zhangsan", or json ("Name": "zhangsan")
In order for the program not to report errors, we must also establish a json function.
3. Solution
Scenario 1
Server-side:
protected void Page_Load(object sender, EventArgs e)
{
string result = "callback({"name":"zhangsan","date":"2012⑴2-03"})";
Response.Clear();
Response.Write(result);
Response.End();
}
client:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var result = null; window.onload = function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://192.168.0.101/ExampleBusinessApplication.Web/web2.aspx";
var head = document.getElementsByTagName("head")[0];
head.insertBefore(script, head.firstChild); };
function callback(data) { result = data; }
function b_click() { alert(result.name); }
</script>
</head>
<body>
<input type="button" value="click me!" onclick="b_click();" />
</body>
</html>
Scenario 2, done by jQuery
By jquery's jasonp way. Using this method, there are requirements on the server side.
The following on the server side:
protected void Page_Load(object sender, EventArgs e)
{
string callback = Request.QueryString["jsoncallback"];
string result = callback + "({"name":"zhangsan","date":"2012⑴2-03"})";
Response.Clear();
Response.Write(result);
Response.End();
}
client:
$.ajax({ async: false, url: "http://192.168.0.5/Web/web1.aspx", type: "GET", dataType: 'jsonp',
// JsonP value custom, if you use JSONCALLBACK, then the server side, you want to return a value corresponding to the value of JSONCALLBACK. Jsonp: 'jsoncallback',
// To pass the parameters, there is no passage, and you must also write Data: Null, Timeout: 5000,
/ / Return JSON Type ContentType: "Application / JSON; UTF⑻",
// The object returned by the server segment includes Name, Data properties.
success: function (result) { alert(result.date); }, error: function (jqXHR, textStatus, errorThrown) { alert(textStatus); } });
In fact, when we perform this js, js makes a request to the server:
http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742
The server also responds by returning the following objects:
jsonp1354506338864({"name":"zhangsan","date":"2012⑴2-03"})
At this point, the requirements for cross-domain paradigm data are implemented