origin - jquery ajax support cors




Por que meu JavaScript obtém um erro “No 'Access-Control-Allow-Origin' está presente no recurso solicitado” quando o Postman não? (20)

Eu estou tentando fazer autorização usando JavaScript conectando-se à API RESTful construída no Flask . 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. A origem 'null' não tem, portanto, permissão de acesso.

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

Este é o código de 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);
    });

Isso não é uma correção para produção ou quando o aplicativo precisa ser mostrado para o cliente, isso só é útil quando o desenvolvimento da UI e do Backend estão em servidores diferentes e na produção eles estão, na verdade, no mesmo servidor. Por exemplo: Ao desenvolver a interface do usuário para qualquer aplicativo, se houver necessidade de testá-lo localmente, apontando-o para o servidor de back-end, nesse cenário, essa é a correção perfeita. Para correção de produção, os cabeçalhos CORS devem ser adicionados ao servidor backend para permitir acesso de origem cruzada.

A maneira mais fácil é simplesmente adicionar a extensão no Google Chrome para permitir o acesso usando o CORS.

( https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US )

Basta ativar essa extensão sempre que você quiser permitir acesso a nenhuma solicitação de cabeçalho 'access-control-allow-origin' .

Ou

No Windows, cole este comando na janela de execução

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

isso abrirá um novo navegador chrome que permite o acesso a nenhuma solicitação de cabeçalho 'access-control-allow-origin' .


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

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

Aviso: Isso contém um problema de segurança para o arquivo PHP que pode ser chamado por invasores. você tem que usar sessões e cookies para autenticação para prevenir seu arquivo / serviço contra este ataque. Seu serviço é vulnerável a falsificação de solicitações entre sites (CSRF).

Se você estiver usando o Node-red , deverá permitir o CORS no arquivo node-red/settings.js , deixando de 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"
},

Consegui resolver com sucesso (no meu caso, para fontes) usando o htaccess, mas, obviamente, OP está pedindo pouco diferente. Mas você pode usar o padrão FileMatch e adicionar qualquer tipo de extensão para que não ocorra erro.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.apache.org/docs/2.4/mod/core.html#filesmatch


Eu gostaria que alguém compartilhasse este site comigo há muito tempo http://cors.io/ teria economizado muito tempo comparado a construir e confiar em meu próprio proxy. No entanto, à medida que você passa para a produção, ter sua própria proxy é a melhor opção, pois você ainda controla todos os aspectos de seus dados.

Tudo que você precisa:

https://cors.io/?http://HTTP_YOUR_LINK_HERE


Há um problema de vários domínios usando o Ajax. Você deve ter certeza de que está acessando seus arquivos no mesmo caminho http:// sem www. (ou aceda a partir de http://www. e publique para o mesmo caminho, incluindo www. ) que o browser considera como outro domínio quando acede a um www. caminho, então você vê onde está o problema. Você está postando em um domínio diferente e o navegador bloqueia o fluxo devido ao problema de origem.

Se a API não for colocada no mesmo host do qual você está solicitando, o fluxo será bloqueado e você precisará encontrar outra maneira de se comunicar com a API.


No meu caso eu estava usando o aplicativo JEE7 JAX-RS e seguir os truques funcionou perfeitamente para mim:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }

Pergunta popular - Outra coisa para ver se você leu até aqui e nada mais ajudou. Se você tiver um CDN como Akamai, Limelight ou similar, poderá verificar a chave de cache que você possui para o URI do recurso. Se não incluir o valor do cabeçalho Origem, você poderá retornar uma resposta armazenada em cache quando solicitada de outra Origem. Acabamos de passar meio dia depurando isso. A configuração do CDN foi atualizada para incluir apenas o valor de Origem para alguns domínios selecionados que são nossos e configurá-lo como null para todos os outros. Isso parece funcionar e permite que navegadores de nossos domínios conhecidos visualizem nossos recursos. Certamente todas as outras respostas são pré-requisitos para chegar aqui, mas se o CDN é o primeiro salto do seu navegador, isso é algo para rever.

No nosso caso, pudemos ver alguns pedidos chegando ao nosso serviço, mas não quase o volume que o site estava enviando. Isso nos indicou o CDN. Conseguimos voltar e ver que a solicitação original foi atendida por uma solicitação direta, não como parte de uma chamada AJAX do navegador, e o cabeçalho de resposta Access-Control-Allow-Origin não foi incluído. Aparentemente, o CDN armazenou esse valor em cache. O ajuste da configuração da CDN da Akamai para considerar o valor do cabeçalho da solicitação de origem como parte da correspondência parece ter feito isso funcionar para nós.


Porque
$ .ajax ({type: "POST" - OPÇÕES DE CHAMADAS
$ .post ( - chama o POST

ambos são diferentes Carteiro chama "POST" corretamente, mas quando nós o chamamos será "OPÇÕES"

Para c # web services - webapi

Por favor, adicione o seguinte código no seu arquivo web.config sob a tag <system.webServer>. Isso vai funcionar

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

Por favor, verifique se você não está cometendo nenhum erro na chamada 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");
    }
});

Angular 4 questão por favor consulte: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Nota: Se você estiver procurando por download de conteúdo de um site de terceiros , isso não ajudará você . 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");

Se você estiver usando o Entity Framework , parece que esse erro algumas vezes será lançado mesmo se você tiver o CORS habilitado. Eu descobri que o erro ocorreu devido a uma falta de finalização da consulta. Espero que isso ajude os outros na mesma situação.

O seguinte código pode lançar o XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. erro:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

Para corrigi-lo, uma chamada de finalização como .ToList() ou .FirstOrDefault() no final da consulta é necessária, assim:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}

Se você estiver usando o Node.js , tente:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Mais informações: CORS no ExpressJS


Se você puder lidar com JSON em troca, tente usar JSONP (observe o P no final) para falar entre domínios:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Saiba mais sobre como trabalhar com o JSONP here :

O advento do JSONP - essencialmente um hack consensual de scripts entre sites - abriu a porta para poderosos mashups de conteúdo. Muitos sites proeminentes fornecem serviços JSONP, permitindo acesso ao conteúdo por meio de uma API predefinida.


Tente XDomain ,

Resumo: Uma alternativa pura de puro CORS / polyfill. Nenhuma configuração de servidor é necessária - basta adicionar um proxy.html no domínio com o qual você deseja se comunicar. Esta biblioteca usa o XHook para conectar todos os XMLHttpRequest , então o XDomain deve funcionar em conjunto com qualquer biblioteca.


https://github.com/Rob--W/cors-anywhere/ fornece o código (Node.js) que você pode usar para configurar e executar seu próprio proxy CORS. Ele é mantido ativamente e fornece vários recursos para controlar o comportamento do proxy além do envio básico dos cabeçalhos de resposta Access-Control-* corretos.

developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS tem detalhes para explicar como os navegadores lidam com solicitações de origem cruzada feitas por aplicativos da Web do lado do cliente a partir de JavaScript e quais cabeçalhos você deve configurar para enviar por o servidor a solicitação é feita, se você puder.

No caso em que um site para o qual você precisa fazer uma solicitação e obter uma resposta não retorna o cabeçalho de resposta Access-Control-Allow-Origin , os navegadores sempre bloquearão as solicitações de origem cruzada feitas diretamente pelo seu cliente lado-código JavaScript de trabalhar. E assim, se o site não é um que você controla e pode configurar o comportamento, a única coisa que funcionará nesse caso é fazer o proxy das solicitações - por meio de seu próprio proxy executado por você ou por meio de um proxy aberto.

Como mencionado em outros comentários aqui, há boas razões para não confiar em um proxy aberto com suas solicitações. Dito isso, se você sabe o que está fazendo e decide que um proxy aberto funciona para as suas necessidades, https://cors-anywhere.herokuapp.com/ é um que está disponível de forma confiável, mantido ativamente e que executa uma instância do https://github.com/Rob--W/cors-anywhere/ code.

Tal como acontece com outros proxies abertos mencionados aqui (alguns dos quais, pelo menos, não parecem estar disponíveis por mais tempo), a forma como funciona é que, em vez de ter o seu código de cliente enviar um pedido diretamente para, por exemplo, http://foo.com você envia para https://cors-anywhere.herokuapp.com/http://foo.com e o proxy adiciona os cabeçalhos necessários do Access-Control-* à resposta que o navegador vê.


Eu tive a seguinte configuração, resultando no mesmo erro, ao solicitar respostas do servidor.

Do lado do servidor: SparkJava -> fornece a API REST
Lado do cliente: ExtJs6 -> fornece renderização do navegador

No lado do servidor eu tive que adicionar isso à resposta:

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

No lado do cliente eu tive que adicionar isso ao pedido:

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});

A maioria dessas respostas informa aos usuários como adicionar cabeçalhos CORS a um servidor que eles controlam.

No entanto, se você precisar de dados de um servidor que não controla em uma página da Web, uma solução é criar uma tag de script em sua página, definir o atributo src como o ponto de extremidade da API que não possui cabeçalhos CORS e carregar esses dados na página:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);

CORS é para você.

O CORS é "Compartilhamento de recursos de origem cruzada" e é uma maneira de enviar uma solicitação de domínio cruzado. Agora, as API XMLHttpRequest2 e Fetch suportam o CORS.

Mas tem seus limites. O servidor precisa reivindicar especificamente o Access-Control-Allow-Origin e não pode ser definido como '*'.

E se você quiser que qualquer origem possa enviar uma solicitação para você, você precisa de JSONP (também precisa definir Access-Control-Allow-Origin , mas pode ser '*').

Para muitos pedidos, se você não sabe o que escolher, eu acho que você precisa de um componente totalmente funcional para fazer isso. Deixe-me apresentar um componente simples catta

Se você estiver usando um navegador moderno (> Internet Explorer9, Chrome, Firefox, Edge, etc.), é muito recomendado que você use um componente simples, mas bonito, catta . Ele não tem dependências, é menor que 3 KB e suporta Fetch, Ajax e JSONP com a mesma sintaxe e opções dead-simple.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

Ele também suporta todo o caminho para importar para o seu projeto, como módulo ES6, CommonJS e até mesmo <script>em HTML.


Se você receber essa mensagem de erro do navegador:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

Quando você está tentando fazer um pedido Ajax POST / GET para um servidor remoto que está fora de seu controle, por favor, esqueça esta simples correção:

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

Você realmente precisa, especialmente se você usa JavaScript apenas para fazer o pedido Ajax, um proxy interno que recebe sua consulta e a envia para o servidor remoto.

Primeiro no seu código JavaScript, faça uma chamada Ajax para seu próprio servidor, algo como:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async: false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Em seguida, crie um arquivo PHP simples chamado proxy.php para agrupar seus dados POST e anexá-los ao servidor de URL remoto como parâmetros. Dou-lhe um exemplo de como contornei esse problema com a API de pesquisa do Expedia Hotel:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Fazendo:

echo json_encode(file_get_contents($url));

Você está apenas fazendo a mesma consulta, mas no lado do servidor e depois disso, ele deve funcionar bem.

Resposta copiada e colada do NizarBsb


Eu tenho esse erro $http.getno Angular. Eu precisava usar em $http.jsonpvez disso.


Para completar, o Apache permite cors:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"

Para o servidor Ruby on Rails application_controller.rb, inclua isto:

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end




flask-restless