Por que o Postman não obtém um erro "Nenhum cabeçalho 'Acesso-controle-permissão-origem' está presente no recurso solicitado" quando meu código JavaScript é exibido?

Nota da modificação : Esta pergunta é sobre por que o Postman não está sujeito a restrições de CORS da mesma maneira que um XMLHttpRequest. Esta pergunta não é sobre como corrigir um erro "Não 'Acesso ao controle de permissão de origem' ...".

Pare de postar :

• Configurações CORS para cada idioma / estrutura sob o sol. Em vez disso, encontre a pergunta da sua linguagem / estrutura relevante .
• Serviços de terceiros que permitem que uma solicitação contorne o CORS
• Opções de linha de comando para desativar o CORS para vários navegadores

Estou tentando fazer autorização usando JavaScript , conectando -me ao Flask interno da API RESTful . No entanto, quando faço a solicitação, recebo o seguinte erro:

XMLHttpRequest não pode carregar http: // myApiUrl / login . Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Portanto, a origem 'null' não é permitida.

Sei que a API ou o recurso remoto deve definir o cabeçalho, mas por que funcionou quando fiz a solicitação pela extensão Postman do Chrome ?

Este é o código da solicitação:

$.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);
    });

Se eu entendi direito, você está fazendo um XMLHttpRequest em um domínio diferente do que sua página está. Portanto, o navegador está bloqueando-o, pois normalmente permite uma solicitação na mesma origem por motivos de segurança. Você precisa fazer algo diferente quando quiser fazer uma solicitação entre domínios. Um tutorial sobre como conseguir isso é Usando o CORS .

Quando você está usando carteiro, eles não são restritos por esta política. Citado em XMLHttpRequest de origem cruzada :

As páginas da Web regulares podem usar o objeto XMLHttpRequest para enviar e receber dados de servidores remotos, mas são limitadas pela mesma política de origem. As extensões não são tão limitadas. Uma extensão pode conversar com servidores remotos fora de sua origem, desde que solicite primeiro permissões de origem.

AVISO: O uso Access-Control-Allow-Origin: *pode tornar sua API / site vulnerável a ataques de falsificação de solicitação entre sites (CSRF). Certifique-se de entender os riscos antes de usar este código.

É muito simples de resolver se você estiver usando PHP . Basta adicionar o seguinte script no início da sua página PHP que lida com a solicitação:

<?php header('Access-Control-Allow-Origin: *'); ?>

Se você estiver usando o Node-red, precisará permitir o CORS no node-red/settings.jsarquivo, sem comentar as seguintes linhas:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

Se você estiver usando o Flask da mesma forma que a pergunta; você tem que instalar primeiroflask-cors

$ pip install -U flask-cors

Em seguida, inclua os Flask cors em seu aplicativo.

from flask_cors import CORS

Uma aplicação simples será semelhante a:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Para mais detalhes, você pode verificar a documentação do Flask .

Porque
$ .ajax ({type: "POST" - chama OPTIONS
$ .post ( - chama POST

Ambos são diferentes. O carteiro chama "POST" corretamente, mas quando o chamamos, será "OPTIONS".

Para serviços web C # - API Web

Por favor, adicione o seguinte código no seu arquivo web.config na tag <system.webServer>. Isso funcionará:

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Verifique se você não está cometendo nenhum erro na chamada do Ajax

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);
    },
    error: function () {
        console.log("error");
    }
});

Nota: Se você estiver procurando por baixar conteúdo de um site de terceiros , isso não ajudará . Você pode tentar o seguinte código, mas não o JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

A aplicação de uma restrição CORS é um recurso de segurança definido por um servidor e implementado por um navegador .

O navegador examina a política do CORS do servidor e a respeita.

No entanto, a ferramenta Postman não se preocupa com a política do CORS do servidor.

É por isso que o erro CORS aparece no navegador, mas não no Postman.

Na investigação abaixo como API, uso http://example.com em vez de http: // myApiUrl / login da sua pergunta, porque esta primeira está funcionando.

Presumo que sua página esteja em http: //my-site.local: 8088 .

A razão pela qual você vê resultados diferentes é que o Postman:

• definir cabeçalho Host=example.com(sua API)
• NÃO definir cabeçalho Origin

Isso é semelhante à maneira como os navegadores enviam solicitações quando o site e a API têm o mesmo domínio (os navegadores também definem o item de cabeçalho Referer=http://my-site.local:8088, mas não o vejo no Postman). Quando o Origincabeçalho não está definido, geralmente os servidores permitem tais solicitações por padrão.

Esta é a maneira padrão como o Postman envia solicitações. Mas um navegador envia solicitações de maneira diferente quando o site e a API têm domínios diferentes e, em seguida, ocorre o CORS e o navegador automaticamente:

• define o cabeçalho Host=example.com(o seu como API)
• define o cabeçalho Origin=http://my-site.local:8088(seu site)

(O cabeçalho Referertem o mesmo valor que Origin). E agora, na guia Console e redes do Chrome, você verá:

Quando você tem Host != Origino CORS, e quando o servidor detecta essa solicitação, geralmente a bloqueia por padrão .

Origin=nullé definido quando você abre o conteúdo HTML de um diretório local e envia uma solicitação. A mesma situação é quando você envia uma solicitação dentro de um <iframe>, como no snippet abaixo (mas aqui o Hostcabeçalho não está definido) - em geral, em todos os lugares em que a especificação HTML diz origem opaca, você pode traduzir isso para Origin=null. Mais informações sobre isso você pode encontrar aqui .

fetch('http://example.com/api', {method: 'POST'});

Look on chrome-console > network tab

Se você não usar uma solicitação CORS simples, geralmente o navegador também envia automaticamente uma solicitação OPTIONS antes de enviar a solicitação principal - mais informações estão aqui . O snippet abaixo mostra:

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});

Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

Você pode alterar a configuração do seu servidor para permitir solicitações CORS.

Aqui está um exemplo de configuração que ativa o CORS no nginx (arquivo nginx.conf) - tenha muito cuidado com a configuração always/"$http_origin"do nginx e "*"do Apache - isso desbloqueará o CORS de qualquer domínio.

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Aqui está um exemplo de configuração que ativa o CORS no Apache (arquivo .htaccess)

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

Foi encontrado o mesmo erro em diferentes casos de uso.

Caso de uso: no chrome, quando tentou chamar o ponto final do Spring REST em angular.

Solução: adicione a anotação @CrossOrigin ("*") na parte superior da respectiva classe Controller.

Se você usa o .NET como camada intermediária, verifique o atributo route claramente, por exemplo,

Eu tive problemas quando era assim,

[Route("something/{somethingLong: long}")] //Space.

Corrigido por isso,

[Route("something/{somethingLong:long}")] //No space

Somente para o projeto da API Web do .NET Core, adicione as seguintes alterações:

1. Adicione o seguinte código após a services.AddMvc()linha no ConfigureServices()método do arquivo Startup.cs:

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

2. Adicione o seguinte código após app.UseMvc()linha no Configure()método do arquivo Startup.cs:

app.UseCors(options => options.AllowAnyOrigin());

3. Abra o controlador que você deseja acessar fora do domínio e adicione este atributo a seguir no nível do controlador:

[EnableCors("AllowOrigin")]