AJAX axios、fetch发送请求，同源策略，跨域解决方案等

在AJAX(二)中，我们讨论了axios和fetch API的使用，以及同源策略和常见的跨域解决方案。

1. axios发送请求

axios是一个基于promise的HTTP库，可以在浏览器和node.js中使用。

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

2. fetch发送请求

fetch API是现代浏览器中用于发起网络请求的接口。

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

3. 同源策略

同源策略是一种安全机制，它限制了一个源的文档或脚本如何与另一个源的资源进行交互。

4. 跨域解决方案
5. JSONP：只支持GET请求，通过动态创建script标签发送请求，服务器返回一个指定回调函数的调用。
6. CORS：服务器设置Access-Control-Allow-Origin响应头部来允许特定的外部域访问资源。
7. 代理服务器：在服务器端设置代理，将请求发送到代理服务器，由代理服务器转发请求到目标服务器。
8. nginx反向代理：配置nginx反向代理，将请求转发到目标服务器。
9. Service Worker：通过在客户端添加Service Worker监听fetch事件来代理请求。

以上解决方案中，CORS是现代开发中最常用的跨域解决方案。