跨域是指访问另外一个域的资源，由于浏览器的同源策略，默认情况下使用 XMLHttpRequest 和 Fetch 请求时是不允许跨域的。跨域的根本原因是浏览器的同源策略，这是由浏览器对 JavaScript 施加的安全限制。

Axios 跨域常见报错

跨域请求被阻止 (Cross-Origin Request Blocked) ：

这是由浏览器实施的同源策略导致的错误。浏览器在默认情况下不允许从一个源发送请求到另一个源，除非目标服务器明确授权。如果没有采取任何跨域解决方案，浏览器会拦截该请求，并报告此错误。

无法获取响应内容 (No 'Access-Control-Allow-Origin' header is present on the requested resource) ：

当使用 CORS (跨域资源共享) 解决方案时，服务器需要在响应头中添加 Access-Control-Allow-Origin 头信息来指示允许访问资源的来源。如果服务器没有正确配置这个头信息或配置不正确，浏览器会报告此错误，表示未经授权无法获取响应内容。

请求出现网络错误 (Network Error) ：

当跨域请求在发送时出现网络错误（例如目标服务器不可访问、请求超时等），Axios 会捕获这个错误，并将其报告为 "Network Error"。

预检请求失败 (Preflight request failed) ：

当使用 CORS 发起一些复杂的请求（例如带有自定义头信息或使用 PUT、DELETE 等非简单请求类型），浏览器会在发送真实请求之前发送一个 OPTIONS 预检请求。如果服务器没有正确处理 OPTIONS 请求或未返回正确的预检响应头，浏览器会报告 "Preflight request failed" 错误。

代理服务器错误：

如果使用代理服务器作为解决方案，但代理服务器配置有误或不可用，Axios 可能会报告与代理服务器连接相关的错误。

Axios 跨域的解决方法

1. CORS

CORS 需要服务器设置 Access-Control-Allow-Origin 响应头，表示该资源可以被指定的域进行跨域访问。

// 服务端代码
res.setHeader('Access-Control-Allow-Origin', '*'); 

2. 服务端启用 CORS

比如 Node.js Express 启用 CORS:

const express = require('express')
const app = express()

app.use(function (req, res, next) {

  // 启用 CORS
  res.header('Access-Control-Allow-Origin', '*');

  next();  
})

3. JSONP

JSONP 的原理是动态插入