问题描述
今天朋友问我为什么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,两个不一样导致的问题
总结
客户端与服务端对请求头的设置一定要相同,要么都为header,要么都为headers
如果不一样,也不一定会报错:客户端发送的请求为header,服务端设置的请求头为headers时,客户端仍然可以接收相应值
总的来说,这次的问题就是服务端在设置请求头的时候写错了
解决方案
服务端加s
客户端去掉s