首页 前端知识 jQuery发送ajax请求出现跨域问题(请求头XXX不被允许)

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

2024-02-19 09:02:49 前端知识 前端哥 567 502 我要收藏

问题描述

今天朋友问我为什么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

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

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

解决方案

  1. 服务端加s

  1. 客户端去掉s

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2301.html
标签
ajax
评论
发布的文章

jquery初始化方法

2024-03-04 10:03:13

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!