项目中出现一个接口使用axios的Post请求出现跨域问题

仅为记录：

我前端的请求如下图所示：

        

明明是很正常的一个POST请求，但请求时总是报跨域，查了一天的资料也没找到，偶然间看道这样的一片文章：

关于 Content-Type:application/x-www-form-urlencoded_半格咖啡的博客-CSDN博客

application/x-www-form-urlencoded： 窗体数据被编码为名称/值对 。这是标准的编码格式。  multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分 。 text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
 补充

form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。 当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。 当action为post时候，浏览器把form数据封装到http body中，然后发送到server。 如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。

看了这位大佬的讲解，我在请求里做了修改如下：

export const getPermission = (param) => {
    return request({
        method: "POST",
        url: '/api/getpermission',
        data: param,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
}

 这个时候我的POST请求中body里的数据就变为这样：

好了问题解决了。

总结一下吧，我的使用了POST请求，而且body里携带了数据，所以请求头中自动出现：Content-Type:application/json,属于json格式的数据。因此我的这个请求也就属于了特殊跨域请求了，会在POST请求发送前，发送一个OPTIONS请求去预检测，而手动添加 'Content-Type': 'application/x-www-form-urlencoded',应该是可以将这个复杂请求降为简单请求，所以也就没有OPTIONS的预检测请求了，这时接口也可以正常访问了。