jQuery发送ajax请求出现跨域问题（请求头XXX不被允许）

问题描述

今天朋友问我为什么jQuery写ajax请求（请求类型为GET）时会出现跨域问题，服务端是利用express搭建的本地服务端，url写的是”https://127.0.0.1:8000/jQuery–server“，发送请求报错如下：

把url中的https改成http以后就出现如下问题：

而且他的问题只在$.ajax({})里出现了，$.get({})和$.post({})都没有报错，都能正常获取响应结果

在我这边跑了一下代码…窝趣？出现了不同类型的问题，我的报错如下：

Access to XMLHttpRequest at ‘http://127.0.0.1:8000/jQuery-server?a=100&b=200′ from origin ‘http://127.0.0.1:5500‘ has been blocked by CORS policy: Request header field d is not allowed by Access-Control-Allow-Headers in preflight response.

问题解决

看了一眼代码后判定：跟协议没有关系，本地url使用的协议就是http协议

所以主要解决他第一个问题

经过调试后发现，他的第一个问题主要是由于服务端没有启动导致的（真无语），启动服务后报错内容与我一致，所以现在问题变成了：请求头没有被允许的问题

但是！！

服务端已经允许了所有请求头：

app.all('/jQuery-server', (request, response) => {
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Header', '*');
    //设置响应
        // response.send('Hello jQuery Ajax')
        const data = {name: 'xielinxi'}
        response.send(JSON.stringify(data))
});

那么问题出在哪儿了？

此处感谢崂山道士老师的文章：解决Request header field XXX is not allowed by access-control-allow-headers in preflight response

根据这篇文章我把设置响应头的部分完全替换成了：

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", "*");

问题被解决。

但是，经过排查，将response.setHeader(“Access-Control-Allow-Methods“, “*”);和response.setHeader(“Access-Control-Allow-Credentials“, “*”);都注掉以后，ajax请求还是能正常获取响应值，那么问题应该出在另外两句上

把崂山道士老师的两行代码与自己的两行代码作比较后发现，他的第三行代码是“Access-Control-Allow-Headers“比我的第四行代码“Access-Control-Allow-Header”多了一个s

对比之后发现，问题的根源在于，我的客户端的请求头设置时设置的时”headers“：

$.ajax({
    //其他信息省略
    ...
    //头信息的设置
    header: {
        c: 300,
        d: 400,
    }
})

这就导致了客户端设置的请求头为header，服务端允许的为headers，两个不一样导致的问题

总结

1. 客户端与服务端对请求头的设置一定要相同，要么都为header，要么都为headers

2. 如果不一样，也不一定会报错：客户端发送的请求为header，服务端设置的请求头为headers时，客户端仍然可以接收相应值

3. 总的来说，这次的问题就是服务端在设置请求头的时候写错了

解决方案

1. 服务端加s

2. 客户端去掉s