ti-enxame.com

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

Eu estou tentando fazer autorização usando JavaScript conectando-se ao RESTfulAPI construído em 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, acesso permitido.

Eu sei que a API ou recurso remoto deve definir o cabeçalho, mas por que funcionou quando fiz a solicitação através 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);
    });
2059
Mr Jedi

Se eu entendi direito você está fazendo um XMLHttpRequest para um domínio diferente do que sua página está. Portanto, o navegador está bloqueando isso, 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 de domínio cruzado. Um tutorial sobre como conseguir isso é Using CORS.

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

Páginas web regulares podem usar o objeto XMLHttpRequest para enviar e receber dados de servidores remotos, mas eles são limitados pela mesma política de Origem. Extensões não são tão limitadas. Uma extensão pode falar com servidores remotos fora de sua origem, desde que primeiro solicite permissões de origem cruzada.

1124
MD. Sahib Bin Mahboob

Isso não é uma correção para produção ou quando o aplicativo precisa ser mostrado ao cliente, isso só é útil quando a interface do usuário e o Backend development estão em diferentes servers e em produção eles estão 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 back-end para permitir o acesso cruzado de origem.

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=pt-BR )

Basta habilitar esta 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 run 

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

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

485
shruti

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

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

Saiba mais sobre como trabalhar com o JSONP aqui :

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

322
Gavin

É 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: *'); ?>

Warning: Contém um problema de segurança para o seu arquivo PHP que pode ser chamado por atacantes. 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ção entre sites (CSRF).

Se você estiver usando Node-red você precisa permitir 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"
},
200
shady sherif

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

168
yoshyosh

Se você estiver usando 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

67
Nguyen Tran

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 acesso de http://www. e postar no mesmo caminho, incluindo www.) que o navegador considera como outro domínio ao acessar através de um caminho www., para que você veja onde o problema é. Você está postando em um domínio diferente e o navegador bloqueia o fluxo devido ao problema de origem.

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

63
Alin Razvan

Porque 
$ .ajax ({type: "POST" - Chamadas OP&CCEDIL;&OTILDE;ES 
$ .post ( - Chamadas POST 

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

Para serviços web c # - 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, certifique-se que 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");
    }
});

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

Nota: Se você está procurando baixar o conteúdo do site de terceiros, então isto não irá ajudá-lo. 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");
48
George Livingston

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 XHR , então o XDomain deve funcionar em conjunto com qualquer biblioteca.

22
user3359786

Se você não quiser:

  1. Desativar a segurança da Web no Chrome
  2. Use JSONP
  3. Use um site de terceiros para redirecionar suas solicitações

e você tem certeza que seu servidor tem o CORS habilitado então (teste o CORS aqui: http://www.test-cors.org/ )

Então você precisa passar no parâmetro Origin com o seu pedido. Esta Origem DEVE corresponder à Origem que seu navegador envia com sua solicitação.

Você pode vê-lo em ação aqui: http://www.wikinomad.com/app/detail/Campgrounds/3591

A funcionalidade de edição envia uma solicitação GET & POST para um domínio diferente para buscar dados. Eu defino o parâmetro Origin que resolve o problema. O backend é um mecanismo do mediaWiki.

tldr: Adicione o parâmetro "Origin" às suas chamadas, que deve ser o parâmetro Origin que seu navegador envia (você não pode falsificar o parâmetro Origin)

11
Ganesh Krishnan

Eu tive um problema com isso quando usei o AngularJS para acessar minha API. A mesma solicitação funcionou no SoapUI 5.0 e no ColdFusion. Meu método GET já tinha o cabeçalho Access-Control-Allow-Origin.

Descobri que AngularJS faz um pedido "trial" de OPTIONS . O ColdFusion, por padrão, gera o método OPTIONS, mas não tem muito, especificamente esses cabeçalhos. O erro foi gerado em resposta a essa chamada OPTIONS e não a minha chamada intencional para GET. Depois que adicionei o método OPTIONS abaixo à minha API, o problema foi resolvido.

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>
8
Leonid Alzhin

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 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")}
});
8
kiltek

Com base na resposta de shruti , criei um atalho do navegador Chrome com os argumentos necessários: enter image description here enter image description here

8
Mohammad AlBanna

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.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS possui detalhes para explicar como os navegadores lidam com solicitações entre origens que os aplicativos da Web do lado do cliente fazem a partir do JavaScript e quais cabeçalhos você deve configurar o envio pelo servidor para o qual a solicitação é feita, se 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 always irão bloquear solicitações de origem cruzada feitas diretamente pelo seu lado do cliente Código JavaScript do trabalho. E assim, se o site não é um que você controla e pode configurar o comportamento, a única coisa que will funcionará nesse caso é fazer proxy das solicitações - através 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 de acordo com suas necessidades, https://cors-anywhere.herokuapp.com/ é aquele que está disponível de forma confiável, mantido ativamente e que executa uma instância do código https://github.com/Rob--W/cors-anywhere/ .

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ê enviá-lo para https://cors-anywhere.herokuapp.com/http://foo.com e o proxy adiciona os cabeçalhos Access-Control-* necessários à resposta que o navegador vê.

7
sideshowbarker

Você pode contornar o problema usando o YQL para fazer proxy do pedido através dos servidores do Yahoo. São apenas algumas linhas de código:

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

Aqui está o link com uma explicação: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

7
camnesia

Se você estiver usando Entity Framework , parece que esse erro algumas vezes será lançado mesmo que você tenha CORS ativado. 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 código a seguir pode lançar o erro XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource.:

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();
}
5
Loyalar

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();
    }
5
Bhuwan Gautam

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 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 de NizarBsb

4
Flash

Eu fui capaz de 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 cause erros.

<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

4
Danish

Para a API do GoLang:

Primeiro você pode dar uma olhada em MDN CORS Doc para saber o que é o CORS. Tanto quanto eu sei, o CORS é sobre permitir que o Origin Of Request acesse ou não o Recurso do Servidor.

E você pode restringir qual solicitação a Origem pode acessar o servidor configurando Access-Control-Allow-Origin em Header da resposta do servidor.

Por exemplo, definir o seguinte cabeçalho na resposta do servidor significa que apenas a solicitação enviada de http://foo.example pode acessar seu servidor:

Access-Control-Allow-Origin: http://foo.example

e seguindo pedido de permissão enviado de qualquer origem (ou domínio):

Access-Control-Allow-Origin: *

E como eu sei na mensagem de erro, requested resource significa recurso do servidor, então No 'Access-Control-Allow-Origin' header is present on the requested resource. significa que você não configurou o cabeçalho Access-Control-Allow-Origin em sua resposta do servidor, ou talvez você configurou, mas a origem da solicitação não está listada em Access-Control-Allow-Origin, portanto a solicitação não é permitida Acesso:

Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. A origem 'null' não tem, portanto, acesso permitido.

No GoLang, eu uso o pacote gorilla/mux para construir o servidor da API em localhost:9091, e permito que o CORS adicione "Access-Control-Allow-Origin", "*" ao cabeçalho da resposta:

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

E eu uso JavaScript no cliente, em localhost:9092 fazer pedido pelo Chrome pode obter com sucesso "OKOK" do servidor localhost:9091.

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

Além disso, você pode verificar seu cabeçalho de solicitação/resposta usando ferramentas como Fiddler.

4
yu yang Jian

Pergunta popular - Outra coisa a considerar 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 defini-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 ao navegador AJAX, e o cabeçalho de resposta Access-Control-Allow-Origin não foi incluído. Aparentemente, o CDN armazenou esse valor em cache. A configuração da CDN da Akamai Tweak 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.

4
No Refunds No Returns

Muitas vezes isso acontece comigo de javascript para o meu php api, porque uma das poucas razões. Eu esqueço de colocar a <?php header('Access-Control-Allow-Origin: *'); ? como uma. Isso é útil para o acesso ao subdomínio. Outra razão, é porque no pedido ajax do jQuery eu estou especificando um dataType específico e retornando um dataType diferente, então ele gera um erro. 

O último e mais proeminente raciocínio para esse erro é que há um erro de análise na página que você está solicitando. Se você acertar o URL da página no seu navegador, provavelmente verá um erro de análise e terá um número de linha para resolver o problema. 

Espero que isso ajude alguém. Levei um tempo a cada vez para depurar isso e queria ter uma lista de coisas para verificar.

3
Garrett Tacoronte

Em jsonp request você deve pegar "jsonpCallback" e mandá-lo de volta.

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

No backend (se você usar como backend PHP)

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

Neste caso, a resposta de backend parece 

jQuery331009526199802841284_1533646326884 ({"ip": "192.168.1.1"})

mas você pode definir um "jsonpCallback" manualmente no frontend e pegá-lo no backend

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

Neste caso, a resposta de backend parece 

get_ip ({"ip": "192.168.1.1"})

2
Alexey Kolotsey

No meu site (com base no .net) Acabei de adicionar isso:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

Muito obrigado a this video.

2
FrenkyB

no caso de você querer consertar isso no backend (no Flask), ao invés de no front end, eu recomendo totalmente o pacote python CORS da Flask. Flask Cors

Com uma linha simples em seu app.py, você pode inserir automaticamente o padrão para permitir qualquer cabeçalho de Origem ou personalizá-lo conforme necessário.

2
Ben Watts

Para completar, 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"
2
zak

O 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 ele 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, https://github.com/Joker-Jelly/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 o módulo ES6, CommonJS e até <script> em HTML.

2
Jelly

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);
2
duhaime

Essa solução definitivamente funcionará para você. Adicione um identificador de mensagem personalizado:

public class CustomHeaderHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        HttpResponseMessage response = await base.SendAsync(request, cancellationToken);
        var referrer = request.Headers.Referrer;
        if (referrer != null && !response.Headers.Contains("Access-Control-Allow-Origin"))
        {
            response.Headers.Add("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
        }
        return response;
    }
}

Registre-se em webapiconfig.cs:

config.MessageHandlers.Add(new CustomHeaderHandler());

E se você estiver usando SignalR, adicione este código no arquivo globle.asax.cs:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    var referrer = Request.UrlReferrer;
    if (Context.Request.Path.Contains("signalr/") && referrer != null)
    {
        Context.Response.AppendHeader("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
    }
}
2
Ujjwal

Eu recebi este erro com $http.get em Angular. Eu precisava usar$http.jsonpem vez disso.

2
Travis Heeter

Talvez seja um pouco complicado, mas você pode usar um servidor web para encaminhar o pedido. Com o nodejs você não tem esse problema. Eu não sou um especialista em nó js. Então eu não sei se isso é código limpo. 

Mas isso funciona para mim

Aqui está um pequeno exemplo:

NODE JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

JS

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})
1
KT Works

Para o servidor Ruby on Rails em application_controller.rb, adicione 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
1
张健健

Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Origem ' https://sx.xyz.com ' não tem, portanto, acesso permitido.

Eu também havia enfrentado um problema semelhante com o Cross Domain Data Exchange na resposta do Ajax como error undefined. Mas a resposta no cabeçalho era Código de status: 200 OK

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

A solução para contornar isso: No meu caso foi para chamar a função checkapikey () via Ajax para outro domínio e obter a resposta com os dados para onde a chamada foi feita:

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_Origin'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_Origin']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}
1
Nishanth ॐ

Para OPERA (funciona da mesma forma que Chrome), iniciei o navegador com este comando:

opera --user-data-dir="~/Downloads/opera-session" --disable-web-security

O problema está resolvido! Agora posso trabalhar em um arquivo HTML local (na minha unidade de disco rígido) e chamar solicitações Ajax para origens remotas no mesmo arquivo.

Nota 1: Você pode dar qualquer pasta em seu diretório home como --user-data-dir.

Nota 2: Testado em Debian 8 (Jessie)/Opera 39

Here is a screenshot

Quando você inicia normalmente (sem os parâmetros acima), a mesma solicitação cai no bloco do código de erro.

0
csonuryilmaz

Talvez você possa copiar o recurso do servidor de produção para o servidor de desenvolvimento E ter o URL para o recurso ajustar dinamicamente. Dessa forma, você estaria lendo sempre da mesma origem, eliminando a exceção cruzada Origin.

0
bachstein

No meu caso eu estava usando Spring Boot como o serviço, você pode adicionar anotação cruzada de uso na operação responsável:

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value = "getFoo", method = RequestMethod.GET)
public ResponseEntity getFoo(){
    // Do something
} 
0
Chandan Kumar

Eu criei uma ponte simples no meu próprio domínio, que busca e mostra o conteúdo do domínio externo.

<?php
header("Content-Type: text/plain");
if (isset($_GET["cnic"]))
{
    $page = file_get_contents("https://external.domain.com/api/verify/" . $_GET["cnic"]);
    echo $page;
}
else
{
    echo "";
}

?>

Agora, em vez de acessar o domínio externo no AJAX, coloquei o URL desse arquivo de ponte.

Você deve ajustar o Content-Type de acordo com suas necessidades. Se os dados estiverem em JSON, use header("Content-Type: application/json");

0
Muhammad Saqib

Só para mencionar outra maneira de "ignorar" o proxy AJAX. Envie uma solicitação ao seu servidor para buscar os dados de outra origem e enviar a solicitação de volta para você.

Eu prefiro essa abordagem sobre JSONP porque tem alguns problemas de segurança em potencial.

0
carobnodrvo

Resolvi isso ativando o CORS para o URL do cliente que acessa a API da web e ele funcionou com êxito.

Por exemplo:

[EnableCors(origins: "http://clientaccessingapi.com", headers: "*", methods: "*")]
0
Rizwan ali