Angular 2 中的预检响应具有无效的 HTTP 状态代码 403

2023-12-12

我正在使用 Angular 2 和 Ionic 2 应用程序。我不得不更改为另一台服务器进行测试,并且 API 已停止工作并出现以下错误消息:

预检响应具有无效的 HTTP 状态代码 403

我将其添加到 .htaccess

<IfModule mod_headers.c>
    Header append Vary User-Agent env=!dont-vary
    Header add Access-Control-Allow-Origin "*"
    Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
    Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>

这是我的角度提供者:

  loginUser(data): Observable<any> {
    let username: string = data.username;
    let password: string = data.password;
    let headers: Headers = new Headers();
    let url = this.domain + "/wp-json/wp/v2/users/me?context=edit";
    let bt = btoa(username + ":" + password);

    this.storage.save('bt', {'bt':bt});
    headers.append("Authorization", "Basic " + bt);
    headers.append('Access-Control-Allow-Headers', 'Content-Type');
    headers.append("Content-type", "application/x-www-form-urlencoded");
    headers.append('Access-Control-Allow-Origin', '*');

    return this.http.get(url, {headers: headers}).map(res => res.json())
  }

此外,还启用了一个针对 CORS 问题的 chrome 插件,当我在 localhost 项目上时,该插件已启用并适用于其他情况。

我尝试了我发现的一切,但我不确定我还能做什么。

检查 Chrome 开发控制台上的网络选项卡,响应如下:

<HTML>
<HEAD>
<TITLE>403 Forbidden</TITLE>
</HEAD>
<BODY>
<H1>Forbidden</H1>
You do not have permission to access this document.
<P>
<HR>
<ADDRESS>
Web Server at my domain here
</ADDRESS>
</BODY>
</HTML>

根据答案,这也是我的重写规则:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

403 响应状态表示服务器后端未配置为处理的一般问题OPTIONS请求,包括CORS 预检OPTIONS要求.

服务器必须响应OPTIONS具有 2xx 成功状态的请求 — 通常为 200 或 204。

如果服务器不这样做,并且您的请求会触发浏览器执行以下操作CORS 预检OPTIONS request,那么什么都没有区别Access-Control-*您将其配置为响应的标头 - 因为如果预检失败,浏览器会立即停止,并且永远不会继续执行GET请求问题中要发送的代码片段。

对于问题中的代码片段,Authorization代码添加的标头会触发浏览器进行预检,并且需要服务器处理OPTIONS要求。

配置服务器处理的答案OPTIONS以正确的方式发出请求(发送 200 或 204 成功消息)取决于其运行的服务器软件。该问题表明服务器正在运行 Apache,因此您可以尝试将其添加到您的.htaccess:

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Update

如果你有东西在你的.htaccess这限制了访问/wp-json/wp/v2/users/me在某种程度上,你需要将其包装在<LimitExcept OPTIONS>…</LimitExcept>;例如:

<LimitExcept OPTIONS>
  Require valid-user
</LimitExcept>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2 中的预检响应具有无效的 HTTP 状态代码 403 的相关文章

  • 使用画布元素作为文本区域

    我正在寻找有关如何使用类似于文本区域的画布元素的直接描述 我见过这样的项目Ace http ace ajax org 只是想知道如何像文本区域一样写入该区域 只是纯文本 没有什么花哨的 提前致谢 Ace 曾经是 Mozilla Skywri
  • 茉莉花单元测试 - 测试对象的未定义属性

    我有以下声明 expect A BAR name toEqual foo 由于我的对象 A 具有顶级属性 BAR 并且 bar 具有值 foo 传递 我想测试我的结构以确认属性 NONEXISTINGPROP 尚未定义 例如 expect
  • 是否可以将自定义 HTML 添加到传单图层组和图层控件

    有什么方法可以将自定义 HTML 注入图层组和图层控件中吗 在我们的应用程序中 我们实现了滑块 输入 范围 来调整不透明度设置 并且很明显 在其控制容器内部的基础层上使用专用滑块是有意义的 没有选项或参数可以修改此控件 理想情况下 我们希望
  • Visual Studio IDE 中功能后的空间

    如何设置 Visual Studio 中的设计以在我的 javascript 函数后面放置一个空格 目前 当我按下返回键时 我得到了这个 var myfunc function 当我想要这个的时候 var myfunc function 知
  • Amcharts 图表 - 图表列到自定义 URL 的超链接以在新选项卡/窗口中打开

    我正在尝试制作一个 amcharts 图表 其中的列链接到自定义网址 并希望网址在新选项卡 窗口中打开 我尝试将此代码添加到图形对象中 但它不起作用 它在同一选项卡 窗口中打开链接 listeners event clickItem met
  • Disqus 评论数始终为 0 条评论

    我想我已经按照通用代码的说明设置了 Disqus 问题是它总是说某个帖子有 0 条评论 拿这个帖子来说 http tx0rx0 com retropie and the raspberry pi http tx0rx0 com retrop
  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在
  • 数据表“footerCallback”函数未在页脚中显示结果

    我尝试获取每列的总和并将结果显示在页脚中 我在用着 页脚回调 https datatables net reference option footerCallbackDatatables提供的功能 但是它在页脚中没有显示任何内容 数据表解释
  • 类型“boolean”不可分配给类型“Observable

    我有那个代码 method Observable
  • 属性访问器(getter)的扩展运算符问题

    我很难理解为什么以下代码存在一些问题https jsfiddle net q4w6e3n3 3 https jsfiddle net q4w6e3n3 3 Note 所有示例均在 chrome 版本 52 0 2743 116 中进行测试
  • 自 2012 年 6 月 12 日以来,“未定义”随机附加在我网站上 1% 的请求网址中

    自 2012 年 6 月 12 日 11 20 TU 起 我在我的 varnish apache 日志中看到非常奇怪的错误 有时 当用户请求一页时 几秒钟后我会看到类似的请求 但 url 中最后一个 之后的所有字符串已被 未定义 替换 例子
  • 如何正确删除动画集中引用的 Raphael SVG 元素?

    我有一组动画 Raphael SVG 元素 我正在通过用户发起的 ajax 调用添加新元素并删除旧元素 我 set push 新元素 但因为我需要删除的元素通常不是集合中的最后一个元素 所以我使用 element remove 而不是 se
  • 大型应用的回流/布局性能

    我正在使用 GWT 构建一个 HTML 应用程序 其性能总体上是正确的 有时 它会加载 DOM 中的许多对象 并且应用程序会变得很慢 我使用 Chrome 开发者工具分析器来查看时间花在哪里 在 Chrome 下 一旦应用程序被编译 即没有
  • 清理 html 字符串中的所有脚本

    HTML5 剪贴板很棒 但我正在寻找一种使其安全的方法 用户正在将文本 html 粘贴到我的网页中 这允许他们粘贴图像 表格等 我正在寻找一种方法 在将粘贴的内容添加到页面之前删除所有脚本 我需要删除
  • 如何上传文件 - sails.js

    我可以下载图像和 pdf 但无法下载文档文件 doc pptx odt 下载文档 doc pptx odt 时 仅将其下载为 ZIP XML 文件 我可以做什么 我在用着 填写上传文件文档 https github com balderda
  • 使用 Socket.IO 时如何访问会话标识符?

    我有一个聊天 我需要管理独特的连接 我四处搜寻 但我找到的解决方案似乎都已被弃用 那么 如何使用 Socket IO 获取套接字的会话 ID 我在用着Node js http en wikipedia org wiki Node js Ex
  • 当选项卡重新加载(chrome 扩展)时,如何运行此脚本?

    所以我想在指定 URL 中重新加载选项卡时运行脚本 它几乎可以工作 但实际上 id 不能 这是我的清单文件 manifest version 2 name Sample Extension description Sample Chrome
  • 如何仅突出显示嵌套表的最里面的表行?

    我有几个嵌套表 我想突出显示鼠标指针下方的最里面的行 我怎样才能做到这一点 一些提示 我使用嵌套表来显示递归表格数据 表可以嵌套 10 层 嵌套正如您所期望的那样 table tr td table tr td table tr td 可能
  • 指定在任何 Jest 设置发生之前运行的代码

    tl dr 是 1 我怎样才能让Jest使用原生的require函数可以在任何地方加载我的测试中的所有模块 2 我将在哪里 如何进行修改 即替换为esm加载程序 https github com standard things esm ht
  • 如何制作过期/签名视频嵌入网址

    我是新来的 正在学习网络开发等等 我只知道如何将我的视频嵌入网站中 任何菜鸟都可以轻松获得源代码 他们也可以嵌入它 但在许多网站中 视频 src 均使用重定向器链接进行编码 例如 它会在一段时间后过期 在本例中是一天 我了解到这是一个签名网

随机推荐