将标头添加到请求时,HTTP状态代码405出错

Question

当使用Axios/http请求设置标头时,我在向服务器发出请求时遇到问题.我添加的任何标头(content-type标头除外)都会导致相同的错误:"预检的响应具有无效的HTTP状态代码405".这在Chrome,Firefox,Edge等中都是如此.

具体来说,我需要为我需要连接的服务添加Authorization标头以进行帐户验证.

使用API​​ URI在Postman上运行GET请求工作正常,我得到了所需的响应.在浏览器中的React应用程序中运行它会给出HTTP 405错误.我在本地节点服务器上运行此Allow-Control-Origin功能,并安装了Google的扩展程序并启用了http://localhost:3000.

当我运行没有任何标头参数的请求时:

axios.get("https://myrequest.com/req/reqservice.svc/Login",).then(data => console.log(data)).catch(err => console.log(err))

请求工作正常.当我用标题(任何标题,但在我的情况下,授权标题)运行它时,我得到错误:

axios.get("https://myrequest.com/req/reqservice.svc/Login", { headers: { "Authorization": "randomExample" } }).then(data => console.log(data)).catch(err => console.log(err))

那么,可能导致这个问题的原因是什么？如果是CORS或连接问题,我一般不会在提出请求时遇到问题吗？我一直在仔细阅读Stack Overflow,没有回答给我解决方案.我完全迷失了该做什么,而且我已经在没有一个解决方案的情况下工作了好几天.任何输入都将非常感激.

Answer 1

这是由于CORS.您需要Access-Control-Allow-Headers为预检(OPTIONS)请求(文档)指定服务器端的正确值

有关CORS的更多详细信息

修改您的服务器以添加缺少的标头.从您的问题来看,您至少需要增加Authorization价值.

节点js服务器

app.use(function (req, res, next) {
//...
res.setHeader('Access-Control-Allow-Headers', 'Authorization');

关于Access-Control-Allow-Headers

Access-Control-Allow-Headers响应头用于响应预检请求,以指示在实际请求期间可以使用哪些HTTP头.

因此,在服务器端响应中,设置时Access-Control-Allow-Headers,需要指定逗号分隔标头的列表.

Access-Control-Allow-Headers: <header-name>, <header-name>, ...

您只需要为自定义标头指定它,因为默认情况下已经接受了一些标头.

简单的标题,接受,接受语言,内容语言,内容类型(但只有其应用程序/ x-www-form-urlencoded,multipart/form-data的解析值(忽略参数)的MIME类型,或text/plain),始终可用,不需要通过此标题列出.

所以在你的情况下它是有效的,如果你只是指定Content-type因为Content-Type默认接受(如上所述)

注意如果值Content-type不是上述类型之一(例如,如果您提交授权请求application/json),则需要将其添加到列表中(逗号分隔)

节点js服务器

app.use(function (req, res, next) {
//...
res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');