写这篇文章的背景是因为之前遇到的，在跨域的情况下通过 axios 发起的 get 请求正常，post 请求会在正式请求发送之前先发送一个 opstions 请求，而后端接口没有兼容 options，导致 404 的情况。

而在解决这个问题时带着好奇心顺带查了一下，给自己补充了些知识点。

跨域请求分两种

简单讲，从 JavaScript 代码发起的 XMLHttpRequest 请求可以分为两种：

简单请求：

不会触发CORS预检的请求，而是直接向服务端发送请求，什么是 CORS预检 咱们后面说，其匹配的规则大致如下：

1. 请求方法为 GET、 HEAD、 POST 中的一种
2. CORS安全部首字段在以下集合中：
   • ACCEPT
   • Accept-Language
   • Content-Language
   • DPR
   • Downlink
   • Save-Data
   • Viewport-Width
   • Width
   • Content-Type (值仅限text/plain,multipart/form-data,application/x-www-form-urlencoded)
3. 请求中的 XMLHttpRequestUpload 对象没有注册任何事件监听
4. 请求中没有 ReadableStream 对象

预检请求：

在发送正式请求之前，会先发起一个 OPTIONS 预检请求到服务器，以获知服务器是否允许该实际请求，若不允许，则不再发送请求，其匹配规则如下：

1. 请求方法为：PUT、 DELETE、 CONNECT、 OPTIONS、 TRACE、 PATCH 之一
2. 人为设置了 CORS安全部首字段集合 之外的字段
3. 请求中的 XMLHttpRequestUpload 对象注册了任意事件监听器
4. 请求中使用了 ReadableStream 对象

在跨域请求中，若服务端返回了正确的跨域响应部首：Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers, 则跨域请求能正常获取数据。

问题解决

根据以上了解的知识点，跟进遇到的问题，发现 axios 的请求部首 Content-Type 的值默认为 application/json;charset=utf-8，且 POST 请求数据为 json 格式，故进行 POST 请求会先发出预检请求，若服务端对预检请求的响应为不支持，则请求终止。

根据上面分析出的原因，以下列举两种解决方案：

完善服务端接口及跨域响应部首

使服务端接口支持 OPTIONS 方法，且对跨域预检请求的请求部首进行完整的响应匹配，表明服务器将接受后续的实际请求，则实际请求将被正常响应。

前端侧处理 axios 的 POST 请求数据

跨域时将请求转换为简单请求：

1. 请求部首的 Content-Type 设为 application/x-www-form-urlencoded
2. 处理 POST 请求数据，方式有以下两种：
   • 通过 URLSearchParams 生成POST 请求的数据
   • 使用 qs 库的 stringify api 对请求数据进行转换（若请求数据中某个字段的值为引用类型，需要先通过 JSON.stringify 处理，以防止服务端无法识别）

例子：

/* 通过 qs 模块处理请求数据*/import axios from 'axios'import qs from 'qs'axios.defaults.withCredentials = true // 若跨域请求需要带 cookie 身份识别axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'// 请求拦截器axios.interceptors.request.use(req => {    // 对 post 请求数据进行处理    if (req.method === 'post') {        Object.keys(req.data).forEach(item => {            !isPrimeval(req.data[item]) && (req.data[item] = JSON.stringify(req.data[item]))        })        req.data = qs.stringify(req.data)    }    return req}, error => {    // 请求出错时处理    return Promise.reject(error)})or/* 通过 URLSearchParams 生成 POST 请求数据 */import axios from 'axios'async function anInterface (url, params = {}) {    let data = new URLSearchParams()    for(let key in params) {        data.append(params[key])    }    const res = await axios.post(url, data)    // 处理数据        return res.data}复制代码

通过以上方式即可将 POST 预检请求转换为简单请求，其好处不言而喻，对于多个 POST 请求而言，可以减少一半的请求数量，且在一些服务端比较不能改动的场景更为适用。

以上为本次文章所有内容，若有问题，望指正；若需转载，望注明出处