AJAX：axios 和 fetch函数发送AJAX请求、同源策略、 jsonp、CORS

在这个问题中，我们将讨论如何使用axios和fetch发送AJAX请求，以及同源策略、JSONP和CORS的概念。

1. 使用axios发送AJAX请求

Axios是一个基于promise的HTTP客户端，它在浏览器和node.js中都可以使用。

// 使用axios发送GET请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
 
// 使用axios发送POST请求
axios.post('https://api.example.com/data', {name: 'John', age: 30})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

2. 使用fetch发送AJAX请求

Fetch API是现代浏览器中用于发送网络请求的接口，它返回一个promise对象。

// 使用fetch发送GET请求
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
 
// 使用fetch发送POST请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({name: 'John', age: 30}),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

3. 同源策略(Same-origin policy)

同源策略是一种安全机制，它限制了一个源的文档或脚本如何与另一个源的资源进行交互。如果两个页面的协议、端口号和主机名都相同，那么它们就是同源的。

4. JSONP

JSONP（JSON with Padding）是一种跨域请求数据的方式，它的基本原理是通过script标签的src属性进行跨域请求，然后在服务器端输出JSON数据并执行一个回调函数。

// 创建一个script标签，并设置src属性
var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.head.appendChild(script);
 
// 定义回调函数
function handleResponse(data) {
  console.log(data);
}

5. CORS

CORS（Cross-Origin Resource Sharing）是一个W3C标准，它允许由服务器决定是否允许跨域请求。

在服务器端设置一个响应头Access-Control-Allow-Origin，可以指定哪些源被允许访问资源，或者设置为*表示允许任何源访问。

// 设置CORS响应头
Access-Control-Allow-Origin: https://example.com

6. 使用axios和fetch进行跨域请求

Axios和Fetch默认都支持CORS，如果你遇到跨域问题，通常是因为服务器没有正确设置CORS响应头。

// 使用axios发送请求，如果遇到跨域问题，浏览器会自动处理
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
 
// 使用fetch发