HTTP协议中的跨域问题是什么？如何解决跨域问题？代码举例讲解

跨域问题指的是浏览器从一个域请求数据,而该数据属于另一个域。出于安全考虑,浏览器会限制从一个域加载的脚本与另一个域的数据进行交互。

解决跨域问题的常用方法有:

1. CORS(跨域资源共享):在服务器设置Access-Control-Allow-Origin,允许指定域跨域访问。
2. JSONP:通过script标签的src引入跨域JSON数据,以函数回调的形式访问数据。
3. 代理:通过代理服务器转发请求至跨域服务器,再返回数据至本地。
4. postMessage:在两个页面中通过postMessage方法交换数据,必须同源或在白名单中。

代码示例:

CORS跨域:

服务端:

// Access-Control-Allow-Origin: * 允许所有域访问
// Access-Control-Allow-Origin: http://example.com 允许指定域访问 
header('Access-Control-Allow-Origin: *');

客户端:

js
$.ajax({
  url: 'http://api.example.com/test',
  success: function(data) {
    console.log(data);
  } 
});

JSONP跨域:

服务端:

// 返回 JSONP 格式数据
echo $_GET['callback'] . '(' . json_encode($data) . ')';

客户端:

js
$.ajax({
  url: 'http://api.example.com/test?callback=showData',
  dataType: 'jsonp',
  success: function(data) {
    console.log(data); 
  }
});

代理跨域:

客户端:

js
$.ajax({
  url: '/proxy?url=http://api.example.com/test',
  success: function(data) {
    console.log(data);
  }
});  

代理服务器收到请求,转发至跨域API并返回响应。