为什么我的 JavaScript 代码会收到“请求的资源上不存在‘Access-Control-Allow-Origin’标头"?错误，而邮递员没有? [英] Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

问题描述

<块引用>

Mod note:这个问题是关于为什么 XMLHttpRequest/fetch/etc.在浏览器上受相同访问策略限制(您会收到提及 CORB 或 CORS 的错误)，而 Postman 则不受此限制.这个问题不是关于如何解决没有'访问控制-允许-来源'..."的问题.错误.这是关于它们发生的原因.

<块引用>

请停止发帖:

• 阳光下每种语言/框架的 CORS 配置.而是找到您的相关语言/框架问题.
• 允许请求绕过 CORS 的第三方服务
• 用于关闭各种浏览器的 CORS 的命令行选项

---

我正在尝试使用 JavaScript 进行授权，方法是连接到 RESTful API 内置 Flask.但是，当我提出请求时，出现以下错误:

<块引用>

XMLHttpRequest 无法加载 http://myApiUrl/login.请求的资源上不存在Access-Control-Allow-Origin"标头.因此，不允许访问原点 'null'.

我知道 API 或远程资源必须设置标头，但是为什么当我通过 Chrome 扩展程序发出请求时它会起作用 邮递员?

这是请求代码:

$.ajax({类型:POST"，数据类型:'文本'，网址:api，用户名:'用户'，密码:'通'，跨域:真，xhr 字段:{withCredentials: 真}}).完成(功能(数据){控制台日志(完成")；}).fail(function(xhr, textStatus, errorThrown) {警报(xhr.responseText)；警报(文本状态)；});

解决方案

如果我理解正确，你正在做一个 XMLHttpRequest 到与您的页面所在的域不同的域.因此浏览器会阻止它，因为出于安全原因，它通常允许来自同一来源的请求.当您想要进行跨域请求时，您需要做一些不同的事情.关于如何实现这一目标的教程是使用 CORS.

当您使用 Postman 时，他们不受此政策的限制.引用自Cross-Origin XMLHttpRequest:><块引用>

常规网页可以使用 XMLHttpRequest 对象从远程服务器发送和接收数据，但它们受到同源策略的限制.扩展没有那么有限.扩展程序可以与其源站之外的远程服务器通信，只要它首先请求跨源权限即可.

Mod note: This question is about why XMLHttpRequest/fetch/etc. on the browser are subject to the Same Access Policy restrictions (you get errors mentioning CORB or CORS) while Postman is not. This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error. It's about why they happen.

Please stop posting:

• CORS configurations for every language/framework under the sun. Instead find your relevant language/framework's question.
• 3rd party services that allow a request to circumvent CORS
• Command line options for turning off CORS for various browsers

---

I am trying to do authorization using JavaScript by connecting to the RESTful API built-in Flask. However, when I make the request, I get the following error:

XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I know that the API or remote resource must set the header, but why did it work when I made the request via the Chrome extension Postman?

This is the request code:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

解决方案

If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.

When you are using Postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

这篇关于为什么我的 JavaScript 代码会收到“请求的资源上不存在‘Access-Control-Allow-Origin’标头"?错误，而邮递员没有?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！