(1)想讲一下ajax 与 axios 都是什么东西?

 两者都是基于浏览器的，从浏览器中创建 XMLHttpRequest。

XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信，这就是我们熟悉的AJAX。

而axios 是从 node.js 发出 http 请求

XMLHttpRequest定义（在XHR诞生前，网页要获取客户端和服务器的任何状态更新，都需要刷新一次，在XHR诞生后就可以完全通过JS代码异步实现这一过程。XHR的诞生也使最初的网页制作转换为开发交互应用，拉开了WEB2.0的序幕。 

XHR是一种浏览器API，极大简化了异步通信的过程，开发者并不需要关注底层的实现，因为浏览器会为我们完成这些工作，如连接管理、协议协商、HTTP请求格式化等等。最初版本的XHR能力非常有限，只支持文本传输，处理上传能力也不足，对于跨域请求也不支持）

(2)然后是什么是跨域

跨域简单就是两个或多个不同域名之间的调用和数据传输，同时域名相同端口不同也属于跨域范畴。

为什么会出现跨域问题？

还的讲一下xhr

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。XHR接口强制要求每个请求都具备严格的HTTP语义–应用提供数据和URL，浏览器格式化请求并管理每个连接的完整生命周期，所以XHR仅仅允许应用自定义一些HTTP首部，但更多的首部是不能自己设定的，如：

• Accept-Charset, Accept-Encoding, Access-Control-*

• Host, Upgrade, Connection, Referer, Origin

• Cookie, Sec-, Proxy-, 及其他首部

浏览器会拒绝绝对不安全的首部重写，以保证应用不能假扮用户代理、用户或请求来源，如Origin由浏览器自动设置，Access-Control-Allow-Origin由服务器设置，如果接受该请求，不包含该字段即可，浏览器发出的请求将作废。

然而客户端提供两种请求 1、简单请求 2 非简单请求

在正式跨域的请求前，浏览器会根据需要，发起一个“PreFlight”（也就是Option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域），还有是否需要Credentials(认证信息）

默认情况下，axios将JavaScript对象序列化为JSON来发送，也就是说会使用 'application/json'作为Content-Type，变得“不简单”了，你可以用qs库来处理post的data

如果不是这个原因，那就检查有没有设置一些自定义的header

option请求：

OPTIONS 方法比较少见，该方法用于请求服务器告知其支持哪些其他的功能和方法。通过 OPTIONS 方法，可以询问服务器具体支持哪些方法，或者服务器会使用什么样的方法来处理一些特殊资源。可以说这是一个探测性的方法，客户端通过该方法可以在不访问服务器上实际资源的情况下就知道处理该资源的最优方式。

1、获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。

2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。

响应头中关键性的字段：

Access-Control-Allow-Method: POSTAccess-Control-Allow-Origin: http://xxx.com

Access-Control-Allow-Method 和 Access-Control-Allow-Origin 分别告知客户端，服务器允许客户端用于跨域的方法和域名。

 Access-Control-Allow-Origin为客户端域名，Access-Control-Allow-Method 为运行客户端执行的方法，

大部分的请求是需要用户携带着用户信息的，比如在一个登录的系统中，用户会携带着相应的cookie或token，但CORS跨域默认是不带身份凭证的。

如果需要附带身份凭证，在发送请求时，通过将withCredentials属性设置为true，可以指定某个请求可以发送凭据。                                             

附带身份凭证对服务端有两个要求：

1. 服务端的Access-Control-Allow-Origin头部不能设置为*

2. 服务端的Access-Control-Allow-Credentials头部设置为true               

原文地址 https://blog.csdn.net/qq_35285375/article/details/80855678