详解ajax跨域问题解决方案

2024-09-01 08:27:09

字体：大中小

来源：转载

供稿：网友

今天来记录一下关于ajax跨域的一些问题。以备不时之需。

跨域

同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。

解决方式

通常来说，比较通用的有如下两种方式，一种是从服务器端下手，另一种则是从客户端的角度出发。二者各有利弊，具体要使用哪种方式还需要具体的分析。

服务器设置响应头服务器代理客户端采用脚本回调机制。

方式一

Access-Control-Allow-Origin 关键字只有在服务器端进行设置才
会生效。也就是说即使再客户端使用

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

也不会有什么效果。

正常ajax请求

下面来模拟一下ajax非跨域请求的案例实现。

test1.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax 测试</title></head><body><input type="button" value="Test" onclick="crossDomainRequest()"><div id="content"></div><script> var xhr = new XMLHttpRequest(); var url = 'http://localhost/learn/ajax/test1.php'; function crossDomainRequest() {  document.getElementById('content').innerHTML = "<font color='red'>loading...</font>";  // 延迟执行  setTimeout(function () {   if (xhr) {    xhr.open('GEt', url, true);    xhr.onreadystatechange = handle_response;    xhr.send(null);   } else {    document.getElementById('content').innerText = "不能创建XMLHttpRequest对象";   }  }, 3000); } function handle_response() {  var container = document.getElementById('content');  if (xhr.readyState == 4) {   if (xhr.status == 200 || xhr.status == 304) {    container.innerHTML = xhr.responseText;   } else {    container.innerText = '不能跨域请求';   }  } }</script></body></html>

同级目录下的test1.PHP内容如下：