Detailed graphic explanation of ajax cross-domain issues (with code)-JS Tutorial-php.cn

This time I will bring you a detailed graphic explanation of ajax cross-domain issues (with code). What are the precautions for ajax cross-domain issues? . The following is a practical case, let's take a look.

Cross-domain

Same-origin policy restrictions

The same-origin policy prevents scripts loaded from one domain from obtaining or operating Document properties on another domain. That is, the domain of the requested URL must be the same as the domain of the current web page. This means that the browser isolates content from different sources to prevent operations between them.

Solution

Generally speaking, there are two common ways: one is from the server side, and the other is from the client's perspective. Set off. Both have advantages and disadvantages, and which method to use requires specific analysis.

Server sets response header
Server proxy
The client uses a script callback mechanism.

Method 1

The Access-Control-Allow-Origin keyword
will take effect only if it is set on the server side. In other words, even if you use

xmlhttprequest.setHeaderREquest('xx','xx');

Copy after login

on the

client, it will not have any effect.

Normal ajax request

Let’s simulate the case implementation of ajax non-cross-domain request.

test1.html

nbsp;html>


 <meta>
 <title>ajax 测试</title>


<input>
<p></p>
<script>
 var xhr = new XMLHttpRequest();
 var url = &#39;http://localhost/learn/ajax/test1.php&#39;;
 function crossDomainRequest() {
  document.getElementById(&#39;content&#39;).innerHTML = "<font color=&#39;red&#39;>loading...";
  // 延迟执行
  setTimeout(function () {
   if (xhr) {
    xhr.open(&#39;GEt&#39;, url, true);
    xhr.onreadystatechange = handle_response;
    xhr.send(null);
   } else {
    document.getElementById(&#39;content&#39;).innerText = "不能创建XMLHttpRequest对象";
   }
  }, 3000);
 }
 function handle_response() {
  var container = document.getElementById(&#39;content&#39;);
  if (xhr.readyState == 4) {
   if (xhr.status == 200 || xhr.status == 304) {
    container.innerHTML = xhr.responseText;
   } else {
    container.innerText = &#39;不能跨域请求&#39;;
   }
  }
 }
</script>

Copy after login

The content of test1.PHP in the same directory is as follows:

<?php echo "It Works.";
?>

Copy after login

Detailed graphic explanation of ajax cross-domain issues (with code)

Cross-domain request

Just now, the HTML file and the PHP file were both under the Apache container, so there was no cross-domain situation. Now put the HTML file on the desktop and request the PHP data again, creating something like this A "cross-domain request".

Pay attention to the address bar information of the browser

When you visit again, you will find the following error message.

Detailed graphic explanation of ajax cross-domain issues (with code)

In this case, a common operation is to set Access-Control-Allow-Origin.

Format: Access-Control-Allow-Origin: domain.com/xx/yy.*

If you know the client’s domain name or the fixed path of the request, it is best not to use wildcards method to further ensure security. If you are not sure, just use the * wildcard character.

When the back-end development language is PHP, you can set it like this at the beginning of the file:

header("Access-Control-Allow-Origin: *");

Copy after login

If it is an ASPX page, you need to set it like this (Java is similar):

Response.AddHeader("Access-Control-Allow-Origin", "*");

Copy after login

At this time, visit the path just now again.

Detailed graphic explanation of ajax cross-domain issues (with code)

ServerAgent mode

This method should be considered more commonly used and widely adopted One way. To say that being an agent is a bit too written, but in fact, it is just a messenger. Let’s give a small example:

Xiao Ming likes a girl named Xiao Hong in Class 3, but is too embarrassed to ask for her QQ and WeChat ID. Then I asked Xiaolan, a girl from my class. Come and help yourself to get it. So Xiaolan is equivalent to an agent. Help Xiao Ming obtain Xiao Hong’s contact information that could not be obtained directly.

Let’s give an example to illustrate this problem.

Direct cross-domain request

Just modify the URL just now and let ajax directly request data from other websites.

nbsp;html>


 <meta>
 <title>ajax 测试</title>


<input>
<p></p>
<script>
 var xhr = new XMLHttpRequest();
// var url = &#39;http://localhost/learn/ajax/test1.php&#39;;
  var url = &#39;http://api.qingyunke.com/api.php?key=free&appid=0&msg=%E5%93%92%E5%93%92&#39;;
 function crossDomainRequest() {
  document.getElementById(&#39;content&#39;).innerHTML = "<font color=&#39;red&#39;>loading...";
  // 延迟执行
  setTimeout(function () {
   if (xhr) {
    xhr.open(&#39;GEt&#39;, url, true);
    xhr.onreadystatechange = handle_response;
    xhr.send(null);
   } else {
    document.getElementById(&#39;content&#39;).innerText = "不能创建XMLHttpRequest对象";
   }
  }, 3000);
 }
 function handle_response() {
  var container = document.getElementById(&#39;content&#39;);
  if (xhr.readyState == 4) {
   if (xhr.status == 200 || xhr.status == 304) {
    container.innerHTML = xhr.responseText;
   } else {
    container.innerText = &#39;不能跨域请求&#39;;
   }
  }
 }
</script>

Copy after login

The results are as follows:

Detailed graphic explanation of ajax cross-domain issues (with code)

Enable proxy mode

For the HTML page just now, we still use our own Interface:

url = 'http://localhost/learn/ajax/test1.php';

Copy after login

The details are as follows:

nbsp;html>


 <meta>
 <title>ajax 测试</title>


<input>
<p></p>
<script>
 var xhr = new XMLHttpRequest();
 var url = &#39;http://localhost/learn/ajax/test1.php&#39;;
//  var url = &#39;http://api.qingyunke.com/api.php?key=free&appid=0&msg=%E5%93%92%E5%93%92&#39;;
 function crossDomainRequest() {
  document.getElementById(&#39;content&#39;).innerHTML = "<font color=&#39;red&#39;>loading...";
  // 延迟执行
  setTimeout(function () {
   if (xhr) {
    xhr.open(&#39;GEt&#39;, url, true);
    xhr.onreadystatechange = handle_response;
    xhr.send(null);
   } else {
    document.getElementById(&#39;content&#39;).innerText = "不能创建XMLHttpRequest对象";
   }
  }, 3000);
 }
 function handle_response() {
  var container = document.getElementById(&#39;content&#39;);
  if (xhr.readyState == 4) {
   if (xhr.status == 200 || xhr.status == 304) {
    container.innerHTML = xhr.responseText;
   } else {
    container.innerText = &#39;不能跨域请求&#39;;
   }
  }
 }
</script>

Copy after login

然后对应的test1.php应该帮助我们实现数据请求这个过程，把“小红的联系方式”要到手，并返回给“小明”。

<?php $url = &#39;http://api.qingyunke.com/api.php?key=free&appid=0&msg=hello%20world.&#39;;
$result = file_get_contents($url);
echo $result;
?>

Copy after login

下面看下代码执行的结果。

Detailed graphic explanation of ajax cross-domain issues (with code)

jsonp方式

JSONP（JSON with Padding）灵感其实源于在HTML页面中script标签内容的加载，对于script的src属性对应的内容，浏览器总是会对其进行加载。于是：

克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。

实现的思路就是：

在服务器端组装出客户端预置好的json数据，通过回调的方式传回给客户端。

原生实现

nbsp;html>


 <meta>
 <title>ajax 测试</title>
 <script></script>


<input>
<input>
<p></p>
<script>
function jsonpcallback(result) {
 for(var i in result) {
  alert(i+":"+result[i]);
 }
 }
 var JSONP = document.createElement("script");
 JSONP.type=&#39;text/javascript&#39;;
 JSONP.src=&#39;http://localhost/learn/ajax/test1.php?callback=jsonpcallback&#39;;
 document.getElementsByTagName(&#39;head&#39;)[0].appendChild(JSONP);
</script>

Copy after login

服务器端test1.php内容如下：

<?php $arr = [1,2,3,4,5,6];
$result = json_encode($arr);
echo "jsonpcallback(".$result.")";
?>

Copy after login

需要注意的是最后组装的返回值内容。

来看下最终的代码执行效果。

Detailed graphic explanation of ajax cross-domain issues (with code)

JQuery方式实现

采用原生的JavaScript需要处理的事情还是蛮多的，下面为了简化操作，决定采用jQuery来代替一下。

nbsp;html>


 <meta>
 <title>ajax 测试</title>
 <script></script>


<input>
<input>
<p></p>
<script>
 function later_action(msg) {
  var element = $("<p><font color=&#39;green&#39;>"+msg+"<br />");
  $("#content").append(element);
 }
 $("#btn").click(function(){
  // alert($("#talk").val());
  $.ajax({
  url: &#39;http://localhost/learn/ajax/test1.php&#39;,
  method: &#39;post&#39;,
  dataType: &#39;jsonp&#39;,
  data: {"talk": $("#talk").val()},
  jsonp: &#39;callback&#39;,
  success: function(callback){
   console.log(callback.content);
   later_action(callback.content);
  },
  error: function(err){
   console.log(JSON.stringify(err));
  },
 });
 });
</script>

Copy after login

相应的，test1.php为了配合客户端聊天的需求，也稍微做了点改变。

<?php $requestparam = isset($_GET[&#39;callback&#39;])?$_GET[&#39;callback&#39;]:&#39;callback&#39;;
// 青云志聊天机器人接口： http://api.qingyunke.com/api.php?key=free&appid=0&msg=hello
// 接收来自客户端的请求内容
$talk = $_REQUEST[&#39;talk&#39;];
$result = file_get_contents("http://api.qingyunke.com/api.php?key=free&appid=0&msg=$talk");
// 拼接一些字符串
echo $requestparam . "($result)";
?>

Copy after login

最后来查看一下跨域的效果吧。

JSONP 跨域实现聊天应用