在这个问题中，我们将讨论如何使用axios和fetch发送AJAX请求，以及同源策略、JSONP和CORS的概念。
- 使用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);
});
- 使用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));
- 同源策略(Same-origin policy)
同源策略是一种安全机制，它限制了一个源的文档或脚本如何与另一个源的资源进行交互。如果两个页面的协议、端口号和主机名都相同，那么它们就是同源的。
- 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);
}
- CORS
CORS（Cross-Origin Resource Sharing）是一个W3C标准，它允许由服务器决定是否允许跨域请求。
在服务器端设置一个响应头Access-Control-Allow-Origin，可以指定哪些源被允许访问资源，或者设置为*表示允许任何源访问。
// 设置CORS响应头
Access-Control-Allow-Origin: https://example.com
- 使用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发