cURL não impõe regras CORS. Essas regras são aplicadas por navegadores para fins de segurança.

Quando você menciona que adicionou o cabeçalho relevante, presumo que quer dizer que você adicionou esses cabeçalhos à solicitação. Na verdade, o cabeçalho é esperado nos cabeçalhos de resposta do servidor, indicando que o recurso pode ser acessado por outros sites diretamente.

FYI, CORS - Compartilhamento de recursos de origem cruzada. Como sua API não oferece suporte, você tem duas opções -

1. Use um servidor proxy no mesmo domínio de sua página da web para acessar a API do 4chan ou,
2. Use um servidor proxy em qualquer outro domínio, mas modifique a resposta para incluir os cabeçalhos necessários.

Eu gostaria de votar para fechar este problema como "Não é um problema".

Obrigado pela sugestão. Eu atualizei meu código para encaminhar a solicitação por meio de um proxy:

axios.get('https://a.4cdn.org/a/threads.json', {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      host: '104.236.174.88',
      port: 3128
    }
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

No entanto, ainda estou recebendo este erro:

Solicitação de origem cruzada bloqueada: a política da mesma origem não permite a leitura do recurso remoto em https://a.4cdn.org/a/threads.json. (Motivo: o cabeçalho CORS 'Access-Control-Allow-Origin' não corresponde a 'https://boards.4chan.org').

Eu pesquisei vários fóruns e perguntas no Stack Overflow e não consigo encontrar nenhuma solução para isso. Agradeceríamos se alguém pudesse fornecer algumas dicas.

Alguma novidade sobre isso? Estou praticamente no mesmo barco ...

Solicitação de origem cruzada bloqueada: a política da mesma origem não permite a leitura do recurso remoto em https://a.4cdn.org/a/threads.json. (Motivo: o cabeçalho CORS 'Access-Control-Allow-Origin' não corresponde a 'https://boards.4chan.org').

Isso ocorre porque https://a.4cdn.org e https://boards.4chan.org são considerados domínios diferentes. A diferença está em um e placas

Eu também estou tendo o mesmo problema. Alguém pode me ajudar nisto por favor

saaaaame

Como uma solução temporária, você pode usar isso: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

Não encontrei nada melhor por enquanto ..

@PetitBateau Não tenho certeza de como a extensão do Chrome ajudaria a enviar solicitações por meio de axios.

@ adl1995 Funcionou bem para mim;)

Uma extensão do Chrome ajuda apenas para quem tem a extensão. Depender da extensão do Chrome em produção não é uma boa ideia, já que nem todo mundo tem essa extensão.

É por isso que disse que era uma solução temporária. E, claro, para um ambiente de desenvolvimento.

Access-Control-Allow-Origin é um cabeçalho de resposta, não um cabeçalho de solicitação:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

axios.get (url, {headers: {'Access-Control-Allow-Origin': *}}) não significa nada!

Experimente
axios.get (url, {crossdomain: true})

@ronnin Para que

O serviço remoto para o qual você está fazendo sua solicitação AJAX não aceita solicitações AJAX de origem cruzada de seu domínio. Uma coisa que você pode fazer se tiver acesso à base de código do lado do servidor de seu site, é criar uma ação de controlador lá (supondo que você esteja usando um MVC) e, em seguida, usá-lo para consumir o serviço remoto. Você pode então fazer solicitações AJAX para a ação do seu controlador. Um bônus dessa abordagem é que você pode executar verificações adicionais antes de entrar em contato com o serviço remoto, formatar sua resposta e até mesmo armazená-la em cache.

Leia isso, todos.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Sempre acho que as referências a esse documento MDN não são muito úteis. é um documento longo e não aborda diretamente a questão em questão. O que devo fazer se não tiver acesso à base de código do servidor e quiser acessar essa API?

Minha solução é criar minha própria api em meu servidor de domínio para acessar qualquer api estrangeira que não permite solicitações de origem cruzada, eu a chamo de minha repetidora api.

@JigzPalillo Você pode compartilhar a abordagem ou o código? Estou muito preso! :(

Normalmente isso funcionaria, mas no caso de não funcionar e você não tiver nenhum acesso a esse domínio ...

axios.get('https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

O que fiz foi criar um repetidor no meu servidor

axios.get('https://www.mydomain.com/repeater.php?url=https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

/* repeater.php */
function collect_data($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //remove on upload
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_VERBOSE, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, false);
    curl_setopt($ch, CURLOPT_REFERER, "https://www.notmydomain.com");
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $result = curl_exec($ch);
    echo curl_error($ch);
    curl_close($ch);
return($result);
}
echo collect_data($_GET["url"]);

O servidor precisa responder com cabeçalhos CORS na chamada de opções. Se você estiver usando nodejs / express, poderá corrigir isso para todos os endpoints com:

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

Mas isso está um pouco solto. Provavelmente deseja estreitar para produção.

Há muito tempo resolvo esse problema. O servidor pertence a um serviço 3p e, portanto, está fora do meu controle. Eu simplesmente fiz um proxy. Tudo está bem nessa frente.

Obrigado

@steveswork mesmo aqui, o servidor pertence a um serviço 3p, muito triste que eu possa usar ajax, request.js mas não axios que eu prefiro 👎

@ adl1995 já consegue resolver este problema? Estou totalmente confuso como lidar com esse erro

é 2018 agora, alguma atualização?

@ challenger532 Não. Ainda não.

O erro ainda prevalece.

Meu conselho: use uma biblioteca diferente .

Ok, isso meio que resolveu meu problema. Veja, estou trabalhando com vuejs e Laravel ... configurei minha rota da web Laravel em php da seguinte maneira:

Route::get('distancematrix/{source}/{destination}', function($source,$destination){
 $url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=$source&destinations=$destination&key=YOUR_API_KEY";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_PROXYPORT, 3128);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);

return json_decode($response, true);
});

então arquivo vuejs eu simplesmente usei axios para enviar uma solicitação para minha rota:

axios.get("distancematrix/place_id:${this.place.source}/place_id:${this.place.destination}").then(response => {
                    console.log('====================================')
                    console.log(response.data)
                    console.log('====================================')
   })

e pronto, funciona bem.

se usar Laravel, função de adição:

cabeçalho ('Access-Control-Allow-Origin: *');

para o controlador ou rota antes do retorno
Exemplo:
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
Desculpe pelo meu Inglês. Espero que isso possa ajudá-lo.

Eu uso vue.js (porta localhost 8080) e Flask para minha API (porta localhost 5000)

Eu simplesmente tive que fazer uma pequena alteração no meu código de API (Flask na porta 5000).
Eu adicionei a extensão flask flask-CORS e modifiquei meu código para usá-lo.
Antes:

from flask import Flask, request
import json
app = Flask(__name__)

Depois de:

from flask import Flask, request
import json
from flask_cors import CORS
app = Flask(__name__)
CORS(app)

Depois disso funcionou e pude usar minha API.
Portanto, não é realmente um problema de axios, mas um problema de API e você recebe um aviso do Firefox não ao chamar a função axios.get.

Ao definir as opções de cabeçalhos e proxy, obtive em vez disso Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. .

Mas consegui contornar isso com esta extensão: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en .

Infelizmente, isso funcionou apenas ontem e não hoje ... Tenho tentado descobrir o porquê

Solicitações de proxy usando o servidor de desenvolvimento Webpack para evitar _cors_ no modo de desenvolvimento

No seu arquivo webpack.config, adicione

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://my-target.com',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

O exemplo acima representará o pedido
axios.post(/api/posts/1 ... . . . .
para https://my-target.com/posts/1

O exemplo Git acima, você precisa mudar assim em sua solicitação

axios.get('/api/a/threads.json', {
    headers: {
           //  if u have some headers like this
       //  'Authorization': ' Basic //////some values'
    },
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

No arquivo webpack.config ........

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

o proxy de configuração do webpack modificado mudará sua solicitação desta forma.

u can see this in chrome dev tool REQUEST HEADERS
https://a.4cdn.org/a/threads.json 

você pode usar vários caminhos no proxy devServer como este
No arquivo webpack.config ........

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/login": {
    "target": 'https://github.com', // for example
    "pathRewrite": { '^/login': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/post": {
    "target": 'https://facebook.com', // for example
    "pathRewrite": { '^/post': '' },
    "changeOrigin": true
    }
  }
}

Use se você precisar

    "changeOrigin": true,
    "secure": false

Passei horas para consertá-lo e parece que não há ajuda em todos os lugares. a maneira simples e rápida é adicionar uma extensão do Chrome chamada Allow-Control-Allow-Origin *. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

vai ajudar só você, mas e as outras pessoas?

De alguma forma útil: https://github.com/shalvah/cors-escape

tentando Vue e axios, obviamente, tenho o mesmo problema.

Acabei de experimentar a solução fornecida pelo sundar6445 e funciona perfeitamente.
O arquivo de configuração do webpack que modifiquei está em/config/index.js. Eu preferi modificar este já que referenciado em/build/webpack.dev.conf.js

Nele você encontra

module.exports = {
  dev: { 
...
proxyTable: {},

Conforme descrito por sundar, mude a proxyTable por, por exemplo, algo como

proxyTable: ({
      '/events': {
        "target": 'http://localhost:3000',
        "changeOrigin": true,
        "secure": false
      }
    }),

o que significa que tudo que começa por / events será roteado para http: // localhost : 3000 / events. Sem 'pathRewrite' no meu caso, o url relativo será o mesmo.

e, claro, não se esqueça de remover o URL completo em seu componente Vue. Eu tive:

  mounted () {
    axios.get('http://localhost:3000/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

se torna:

  mounted () {
    axios.get('/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

e funciona perfeitamente bem. Obrigado a @ sundar6445

Espero que isto ajude

Sei que está marcado como fechado, mas queria apontar algo. Às vezes, esse erro aparecerá no lado do cliente se sua chave de API expirou ou está sendo usada por outra pessoa.

Isso pode ser desnecessário falar de desenvolvedores mais experientes, mas para aquelas pessoas novas em programação, certifique-se de ter uma chave de API exclusiva. Nem todas as APIs exigem chaves exclusivas, mas se exigirem, você certamente precisará delas. Consulte a documentação da API para sua API específica para ver o que eles exigem.

Não há opção como crossDomain dentro do Axios. Por favor, estude o código-fonte antes de dar / usar pistas erradas.

Você não pode executar JavaScript em um cliente (sem desabilitar CORS e torná-lo um alvo para XSS) para recuperar informações de outro site.

Isso evita que você obtenha acesso ao navegador de um cliente e, potencialmente, esvazie suas contas bancárias ou poste em algum site sem suas permissões. O mesmo vale para sites de scraping (que é essencialmente o que o op está tentando fazer).

Você pode copiar a web (ou seja, buscar dados) usando um servidor com um módulo CORS e proxy por meio desse servidor.

Acho que essa configuração de cabeçalho resolverá esse problema.

headers: { 'content-type': 'application/x-www-form-urlencoded' }

Obrigado

Eu sei que isso parece clichê, mas minha solução para esse problema foi criar uma API personalizada para lidar com essas chamadas.

O problema não é com axios. O problema é com o servidor. Ao fornecer dados, você deve adicionar os seguintes cabeçalhos antes de enviá-los.

Access-Control-Allow-Origin deve ser definido como *

Access-Control-Allow-Headers deve ser definido como Origin, X-Requested-With, Content-Type, Accept

Fonte: erro CORS ao fazer chamada axios.get

Referindo-se a essas respostas, adicionei essas linhas ao meu servidor expresso de back-end, assim:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8080"); //My frontend APP domain
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});`

fonte: CORS em ExpressJS

E tudo funciona bem para mim, sem qualquer configuração adicional no axios ou no frontend, então não é realmente um problema do axios, mas uma falta de configuração do cabeçalho do lado do servidor.

Finalmente, acho que esta outra resposta sobre stackoverflow cobre muito bem o assunto:

Como evitar o preflight CORS
Como usar um proxy CORS para contornar problemas de “Nenhum cabeçalho Access-Control-Allow-Origin”
Como consertar o cabeçalho “Access-Control-Allow-Origin não deve ser o caractere curinga”

espero que ajude.

se você deseja buscar dados de uma API ou url de terceiros que tem um problema com seu cabeçalho CORS (ausente ou contém vários valores), acho que a única solução para isso é usar este link
" https://cors-anywhere.herokuapp.com/ "
Eu uso o link para pequenos projetos, mas para grandes projetos você pode querer criar sua própria API para lidar com as chamadas e criando a API, você pode usar o projeto de código aberto https://github.com/Rob--W/cors-anywhere / .

Este vai funcionar:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

Eu me deparei com esse problema há algum tempo enquanto criava o 4webm e o 4chan-list-webm

É importante notar que se você fizer um plug-in de navegador, não precisa brincar com os cabeçalhos para acessar a API. Talvez se chamarmos @moot, ele habilite o CORS: smile:

crossdomain: true

Tive que habilitar a porta '8080' no backend CORS e funcionou.

seguro

documentação do webpack para um melhor entendimento: https://webpack.js.org/configuration/dev-server/#devserver -proxy

Se você estiver usando laravel ou lumen para sua API de back-end. E você já está usando o pacote barryvdh / laravel-cors. A solução é definir sua configuração cors.php como cabeçalho, método e parte de origem como este
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
Espero que isso resolva o problema de alguém

Se você fizer isso no safari, não demorará muito. Basta habilitar o menu do desenvolvedor em Preferências >> Avançado e selecionar "Desativar restrições de origem cruzada" no menu de desenvolvimento. Se você quiser apenas local, só precisará habilitar o menu do desenvolvedor e selecionar "Desabilitar restrições de arquivo local" no menu de desenvolvimento.

e no Chrome para OSX abra o Terminal e execute:

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

--user-data-dir exigido no Chrome 49+ no OSX

Para Linux, execute:

$ google-chrome --disable-web-security
Além disso, se você está tentando acessar arquivos locais para fins de desenvolvimento, como AJAX ou JSON, também pode usar este sinalizador.

-–allow-file-access-from-files
Para o Windows, vá para o prompt de comando e vá para a pasta onde Chrome.exe está e digite

chrome.exe --disable-web-security
Isso deve desabilitar a mesma política de origem e permitir que você acesse os arquivos locais.

Tentei todas as soluções mencionadas acima. nada funciona.
finalmente encontrei um - https://github.com/expressjs/cors
espero que ajude vocês

O principal problema é a diferença entre as solicitações do servidor e as solicitações do cliente.

Ao fazer solicitações por meio do cliente (também conhecido como navegador, na maioria das vezes), você fica à mercê do software do navegador. O padrão para software de navegador é impedir qualquer tentativa de atividade maliciosa que pode ou não vir de seu próprio software.

Se você estiver fazendo uma solicitação de seu próprio servidor (também conhecido como não um cliente de navegador), o dado é que para o código que você mesmo escreveu, ninguém (dependendo das configurações do seu servidor) pode acessar ou controlar, e você sabe o que tipos de solicitações são enviadas para que não haja preocupações com chamadas de rede ocorrendo fora do seu ambiente ou de seu conhecimento.

É por isso que os navegadores são rígidos quanto a solicitações de origem cruzada, especificamente porque, uma vez que seu código público está no cliente, você tem menos controle sobre quem o vê / quem pode manipulá-lo. No caso de seu aplicativo front-end ser comprometido e algum software malicioso for capaz de conduzir chamadas de rede fora de seu código às custas de seus visitantes / usuários, eles querem garantir que isso não aconteça. Portanto, seu mydomain.com não pode fazer chamadas para allyourdataarebelongtome.com, apenas no caso de você não querer que isso acontecesse.

A solução aqui não é que as solicitações de domínio cruzado não estejam funcionando - é que seu próprio servidor está impedindo isso e você precisa acomodar essa circunstância ao aceitar seu domínio de origem ou que o servidor de terceiros para o qual você está tentando fazer chamadas de API tem algum outro método de autenticação / autorização além dessa solicitação de domínio cruzado.

@mddanishyusuf Solution funcionou para mim.

Acho que essa configuração de cabeçalho resolverá esse problema.

headers: { 'content-type': 'application/x-www-form-urlencoded' }

Obrigado

Obrigado! ;)

A partir daqui: https://github.com/axios/axios Percebi que eles não colocam url completo para a solicitação de url axios.

Então, tentei resolver isso criando minha própria API em meu site. Acabei de enviar um pedido como este

axios.get('/sample/request')

então http://127.0.0.1 : 8080 / sample / request enviará outra solicitação para https://a.4cdn.org/ e retornará as respostas para axios como json.

É um trabalho para mim, espero que possa ajudá-lo

https://github.com/axios/axios/issues/853#issuecomment -408218917 funcionou com fetch API e uma API da web .NET 4.5.

Pelo que entendi, o problema é que a solicitação é enviada de loclahost: 3000 para loclahost: 8080 e o navegador rejeita solicitações como CORS. Portanto, a solução foi criar um proxy e o navegador irá lidar com as solicitações à medida que elas saem de um servidor.
Corrija-me se eu estiver errado

Minha solução foi:
importar proxy de 'http-proxy-middleware'
app.use ('/ api / **', proxy ({target: "http: // localhost: 8080"}));

Estava com o mesmo problema e resolvi instalando 'cors' no meu backend (Express).

Corre:
npm install cors

Em seguida, defina isto:

var cors = require('cors');
app.use(cors());

Obrigado @fernandoruch , isso está funcionando com meu servidor nodejs

Eu tive o mesmo problema e resolvi

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

funcionou no início, mas depois parou e eu não conseguia descobrir o porquê.

então percebi que movi todo o meu código para outro arquivo, então preciso usar o roteador:

router.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

Oi,

Qualquer atualização sobre este problema, estou usando .net core 2.1 e axios 0.18.

Obrigado.

Não acho que o problema esteja nos axios, o problema está no servidor back-end.

Para mim, tenho uma arquitetura com Flask no back-end e usando axios no Vue.JS, a única coisa que tive que fazer no meu servidor Flask é:

...
from flask_cors import CORS
...
CORS(app)

Isso não deve ir para a produção, você também pode ter uma lista de permissões de origem cruzada no nível nginx. Eu li isso , pode ser útil.

Como uma solução temporária, você pode usar isso: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

Não encontrei nada melhor por enquanto ..

Péssima ideia

Encontrei esse problema quando tentei simplesmente fazer uma solicitação axios.get() para a API do clima Darksky. Quando li a página de FAQ do Darksky, encontrei uma pergunta sobre esse mesmo problema, eles responderam dizendo que usaram isso como uma medida de segurança para evitar o acesso malicioso não intencional às suas informações e sugeriram a criação de um proxy para acessar seu banco de dados.

Fiz a seguinte alteração em meu arquivo package.json (estou usando create-react-app):

{
  "proxy": "https://api.darksky.net/forecast/[myKey]
}

myKey me foi fornecido por Darksky para acessar seus dados.

Esta foi uma solução super simples e funcionou para mim! Eu suspeito que muitos serviços de API começarão a usar isso como uma medida de segurança. Espero que minha solução possa ajudar outras pessoas com problemas semelhantes.

Em resumo: crie um proxy.

Obrigado @fernandoruch . Funciona para mim quando o adiciono ao app.js do meu servidor node.js.

var cors = require('cors');
app.use(cors());

import axios from 'axios'
import jsonpAdapter from 'axios-jsonp'

axios.get(`${url}`, { adapter: jsonpAdapter })
        .then(result => {
            console.log('Status Code: ' + result.status)
        })
        .catch(error => console.log('Request failed'))

JSONP (JSON com Padding ou JSON-P) é usado para solicitar dados de um servidor que reside em um domínio diferente do cliente. JSONP permite o compartilhamento de dados ignorando a política de mesma origem.

Acabei de usar $ .get de jquery para chamadas de API externas.

se você deseja buscar dados de uma API ou url de terceiros que tem um problema com seu cabeçalho CORS (ausente ou contém vários valores), acho que a única solução para isso é usar este link
" https://cors-anywhere.herokuapp.com/ "
Eu uso o link para pequenos projetos, mas para grandes projetos você pode querer criar sua própria API para lidar com as chamadas e criando a API, você pode usar o projeto de código aberto https://github.com/Rob--W/cors-anywhere / .

Este vai funcionar:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

@yasincidem - Você é um diamante absoluto por esta sugestão. Saúde - segui muitas trilhas pela web em busca de uma solução e a sua é a primeira que funcionou para o meu cenário específico.

Eu acabei de encontrar esse problema. Eu tinha {withCredentials: true} (copiar e colar da minha outra API) para que esta API de terceiros em particular funcionasse, simplesmente removi {withCredentials: true}

Esta solução funciona para mim

axios.get(myurl, {
    crossDomain: true
}).then(res => { 
    console.log(res);
}).catch(error => {
    console.log('error', error);
})

referência https://stackoverflow.com/questions/42422494/cross-domain-at-axios

se você deseja buscar dados de uma API ou url de terceiros que tem um problema com seu cabeçalho CORS (ausente ou contém vários valores), acho que a única solução para isso é usar este link
" https://cors-anywhere.herokuapp.com/ "
Eu uso o link para pequenos projetos, mas para grandes projetos você pode querer criar sua própria API para lidar com as chamadas e criando a API, você pode usar o projeto de código aberto https://github.com/Rob--W/cors-anywhere / .

Este vai funcionar:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

Extraordinário, funciona !!!

encontramos esse problema também ao mudar para axios
nossa configuração é webpack + devServer (com proxy) + axios

o problema é que usamos nosso URL de api completo como baseURL em axios em vez de apenas '/ api' (o proxy faz o mapeamento por meio do atributo target)

Em minha opinião, isso pode ser devido aos nossos próprios erros. Estou tendo o mesmo problema acima. Demorei 2 dias a procurar este problema. Acontece que é apenas um pequeno problema que encontrei. o endereço de url que inseri não está de acordo com a documentação de análise. e agora axios funciona perfeitamente no meu angular 7

Verifique se o frasco ou outro servidor possui CORS habilitado.
Verifique também se o endereço do servidor está correto. Fiquei preso apenas porque esqueci de adicionar a porta do servidor.
axios.get ('http: // localhost: 5000 / jsonshow')
.então (resposta => (this.array = resposta))

Alterar " localhost: 3000 " para " http: // localhost : 300" funciona bem comigo (certifique-se de habilitar cors no lado do servidor)

Alterar " localhost: 3000 " para " http: // localhost : 300" funciona bem comigo (certifique-se de habilitar cors no lado do servidor)

se você estiver executando na porta 300 e não 3000.

em VueJS você pode criar um vil chamado vue.config.js na raiz do projeto se ele não existir e adicionar algo como

module.exports = {
  devServer: {proxy: 'http://localhost:3000'}
}

Então sua chamada Axios deve ser parecida com

axios.get('/api/say_hello', {})

se você deseja buscar dados de uma API ou url de terceiros que tem um problema com seu cabeçalho CORS (ausente ou contém vários valores), acho que a única solução para isso é usar este link
" https://cors-anywhere.herokuapp.com/ "
Eu uso o link para pequenos projetos, mas para grandes projetos você pode querer criar sua própria API para lidar com as chamadas e criando a API, você pode usar o projeto de código aberto https://github.com/Rob--W/cors-anywhere / .

Este vai funcionar:

axios.get ( ${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json )
.então (res => {
console.log (res)
})

Este funcionou para mim! Obrigado!

Tente este :

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

Vue.config.productionTip = false;

// ======================
axios.defaults.withCredentials = false;
axios.defaults.proxy = {
  host: 'http://localhost',
  port: 5000,
};
// ======================
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

se você deseja buscar dados de uma API ou url de terceiros que tem um problema com seu cabeçalho CORS (ausente ou contém vários valores), acho que a única solução para isso é usar este link
" https://cors-anywhere.herokuapp.com/ "
Eu uso o link para pequenos projetos, mas para grandes projetos você pode querer criar sua própria API para lidar com as chamadas e criando a API, você pode usar o projeto de código aberto https://github.com/Rob--W/cors-anywhere / .

Este vai funcionar:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

Economizando meu tempo, muito obrigado!

@ronnin Para que

O que? Mesmo? Para mim, definitivamente funcionou ...
Para o método GET, funciona perfeitamente!

Aqui está o exemplo que fiz usando uma API pública, com base no comentário de @ronnin :
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

é 2019 agora, alguma atualização? 😃

eu uso esta extensão do Chrome para desenvolver meu aplicativo
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

@ronnin Para que

Homens que estão com problemas não são bem conhecidos pelo CORS e devem ler o artigo @ seungha-kim mencionado anteriormente: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Como resumo:

1. os recursos remotos que você solicitou, se não estiver no mesmo host que solicitou (denominado: origem), deve fornecer cabeçalho CORS adicional junto com o recurso, também conhecido como. Permitir controle de acesso: host (origem), cabeçalhos, métodos, etc.
2. solicitar por navegadores ou curl com o cabeçalho 'Access-Control-Request-Method', solicitar com o método 'OPTIONS' será tentado primeiro automaticamente antes do método pretendido: 'GET', 'POST', etc.
   o que significa que os manipuladores de recursos remotos devem manipular o método 'OPTION' especialmente. por exemplo (nginx):
   `` `descolado
   localização / recurso-remoto {
   if ($ request_method = 'OPTIONS') {
   add_header 'Access-Control-Allow-Origin' $ http_origin;
   add_header 'Access-Control-Allow-Headers' 'DNT, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Authorization';
   add_header 'Access-Control-Allow-Methods' 'OPTIONS, GET, POST, PUT, PATCH, DELETE';
   add_header 'Access-Control-Allow-Credentials' true;
   add_header 'Access-Control-Max-Age' 1728000; # 20d

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
   return 204;
  }
 // more ...

}
`` `

1. como mencionado acima, eu não usei o valor * para cada cabeçalho Access-Control-Allow- *.
   valor *, tem muitas restrições.
   uma. valor * para Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods não funciona com Access-Control-Allow-Credentials = true. se o cookie for necessário com a solicitação, você precisará de Access-Control-Allow-Credentials = true
   b. apenas * é válido, * .google.com é INVÁLIDO

1. Access-Control-Allow-Headers é uma lista de cabeçalhos de sua solicitação, possivelmente junto com. a existência de alguns cabeçalhos que não estão listados nele farão com que você seja bloqueado. basta verificar e selecionar os cabeçalhos em Access-Control-Allow-Headers

2. o problema não está principalmente no cliente (navegador, seu aplicativo cliente), mas no recurso solicitado do servidor localizado.

3. converse com o seu parceiro de desenvolvimento do lado do servidor

Espero que seja útil

@ronnin : Se entendi corretamente seus pontos, isso significa que se minha solicitação GET está solicitando recursos de algum servidor que não habilitou o CORS, basicamente não há nada que possamos fazer do front end, certo?

@ronnin : Se entendi corretamente seus pontos, isso significa que se minha solicitação GET está solicitando recursos de algum servidor que não habilitou o CORS, basicamente não há nada que possamos fazer do front end, certo?

Use o seguinte aplicativo abaixo para fazer suas solicitações funcionarem

Funcionou para mim, embora o servidor não habilitasse o CORS

https://cors-anywhere.herokuapp.com/

Uso:

url = https://cors-anywhere.herokuapp.com${url} ;
`

@ronnin : Se entendi corretamente seus pontos, isso significa que se minha solicitação GET está solicitando recursos de algum servidor que não habilitou o CORS, basicamente não há nada que possamos fazer do front end, certo?

se minha solicitação GET está solicitando recursos de algum servidor que não habilitou CORS, basicamente não há nada que possamos fazer do front-end por meio de solicitação XHR (também conhecida como solicitação AJAX) diretamente. Sim!
É o navegador que segue o protocolo e rejeita sua solicitação.
mas você pode obter o recurso por solicitação tradicional do navegador, como location.href, iframe, form.action

Principalmente, configuramos um servidor proxy reverso próprio, (como o nginx), com o lado do servidor autocontrolado para resolver o problema de solicitação de recurso de terceiro sem CORS habilitado.
O aplicativo Heroku, @ndjerrou mencionou, é o caso.

temos carros autônomos e IA, mas ainda lutamos com CORS

Consegui resolver isso usando o heroku como proxy.

Aqui está meu código;

fetch("https://cors-anywhere.herokuapp.com/boards.4chan.org/biz/thread/13932651.json")
           .then(res => { //returns a readable stream
                  res.body.getReader().read().then(r => { //returns a Uint8 buffer array
                       var result = new TextDecoder("utf-8").decode(r.value); //Decodes the buffer array into a string
                           console.log(JSON.parse(result)) //the result you want
                   })
            })

agora é 2020, há alguma atualização? 😃

Pode confirmar, é 2020 e ainda nenhuma atualização.
fetch () tem o modo mode: 'no-cors' , por que axios não tem algo semelhante?

eu tentei

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

E nenhum desses cabeçalhos funcionou. Eu tentei withCredentials em estados verdadeiro e falso, não funcionou.

Com fetch, ele simplesmente funciona.

O que devo fazer se não quiser lidar com a política CORS e ainda usar axios?
Edit: Além disso, por que diabos esse problema está fechado? Obviamente, ainda temos um problema com isso.

Você precisa definir 'Access-Control-Allow-Origin': 'YOUR_IP:YOUR_PORT' nos cabeçalhos de resposta, NÃO nos cabeçalhos de solicitação.

Pode confirmar, é 2020 e ainda nenhuma atualização.
fetch () tem o modo mode: 'no-cors' , por que axios não tem algo semelhante?

eu tentei

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

E nenhum desses cabeçalhos funcionou. Eu tentei withCredentials em estados verdadeiro e falso, não funcionou.

Com fetch, ele simplesmente funciona.

O que devo fazer se não quiser lidar com a política CORS e ainda usar axios?
Edit: Além disso, por que diabos esse problema está fechado? Obviamente, ainda temos um problema com isso.

Não há problema com os axios, por isso o problema foi encerrado. basta pegar uma cadeira e ler o artigo sobre MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

南辕北辙 ， 徒劳无功

Obrigado pessoal, isso ajudou! Perdoe-me pelo transtorno!

Tive esse erro no axios quando estava no hotspot móvel dos meus dispositivos. Então, quando usei o WiFi em uma cafeteria, não recebi um CORB

Tentei usar a API da Wikipedia e tive o mesmo problema.
Adicionar origin=* ao URL corrigiu o problema.

const endpoint = `https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&srsearch=${searchTerm}&format=json`;

Eu resolvi isso não usando axios, tentei GET de URLs externos com $ ajax e $ get, não tive problemas com o material antigo do jquery. É um BUG com certeza.

agora é 2021, há alguma atualização? 😃

Estou enfrentando um problema semelhante relacionado a "Access-Control-Allow-Headers" ao tentar acessar um webhook zapier de axios (0.18.0) e chrome (75.0.3770.100).

Meu pedido é:

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

Receberei um erro sobre o cabeçalho não compatível:

bloqueado pela política CORS: o tipo de conteúdo do campo de cabeçalho de solicitação não é permitido por Access-Control-Allow-Headers na resposta de comprovação

Depois de ler esta página, meu entendimento é:

• 1. Zapier precisa configurar a resposta do servidor para suportar Access-Control-Request-Headers para pelo menos "content-type"
• 1. Preciso configurar minha solicitação para excluir de alguma forma a verificação de cabeçalho "tipo de conteúdo" durante o OPT de comprovação.

Há alguma sugestão para alcançar a opção 2? Os problemas comuns de Zapier

Edit: Estou convencido de que isso tem pouco / nada a ver com axios, mas um suporte bastante pobre na extremidade de Zapier. A solicitação parece funcionar depois de mudar para um GET com parâmetros de URL.

Bem, se nas FAQs eles mencionarem não precisar de nenhum parâmetro de tipo de conteúdo, você
poderia apenas experimentar o velho
Var xhr = new XMLHTTPRequest () e tente dessa forma sem axios.

A sua postagem no webhook está no cliente ou no servidor?

Na terça-feira, 25 de junho de 2019, 15h27, Pete Schmitz [email protected] escreveu:

Estou enfrentando um problema semelhante relacionado a "Access-Control-Allow-Headers"
ao tentar acertar um webhook zapier de axios (0.18.0) e chrome
(75.0.3770.100).

Meu pedido é:

axios.post ("https://hooks.zapier.com/hooks/catch/xxx/xxxx", {email});

Receberei um erro sobre o cabeçalho não compatível:

bloqueado pela política CORS: o tipo de conteúdo do campo de cabeçalho de solicitação não é permitido
por Access-Control-Allow-Headers na resposta de comprovação

[imagem: imagem]
https://user-images.githubusercontent.com/3190970/60138000-9ccdda80-975d-11e9-8f6d-e47bcffe91f1.png

Depois de ler esta página, meu entendimento é:

-
1. Zapier precisa configurar a resposta do servidor para oferecer suporte
Access-Control-Request-Headers para pelo menos "content-type"
-
1. Preciso configurar minha solicitação para excluir de alguma forma o
verificação de cabeçalho "content-type" durante a OPT do preflight.

Há alguma sugestão para alcançar a opção 2? Problemas comuns de Zapier
sobre Access-Control-Request-Headers
https://zapier.com/help/common-problems-webhooks/#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error
sugere "não personalize o tipo de conteúdo" do seu pedido. No entanto, eu
não tenho opções de cabeçalho em minha solicitação, nem cabeçalhos padrão
configurado para axios, então eu só posso assumir que isso está implícito no final de axios?

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/axios/axios/issues/853?email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYRYXPA#issuecomment-505646012 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
.

Alguma novidade sobre isso? Estou praticamente no mesmo barco.

@imranimu O problema é uma combinação do navegador que você está usando e do servidor para o qual está fazendo a solicitação. Não há nada que os axios possam fazer a respeito, a menos que o navegador exponha uma API que o deixe ignorar a verificação do CORS.

Você tem poucas opções:

Se você controlar o servidor que está solicitando, permita que ele responda a todas as solicitações OPTIONS com os seguintes cabeçalhos:

Access-Control-Allow-Origin: https://www.mywebsite.com <<REPLACE WITH YOUR SITE - USE COMMA IF MORE THAN ONE>>
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Access-Control-Allow-Origin

Com o expresso, isso pode ser parecido com isto, colocado antes de outras rotas em sua cadeia de middleware:

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');
    res.send(HttpStatusCode.OK);
});

Você também deve anexar um cabeçalho Access-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>> à resposta.

app.get('/my-cors-friendly-route', async (req, res, next) => {
   const data = await this.http.get('https://www.someothersite.com');
   res.append('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
   res.json(data)
});

Simplificando, o navegador sabe quando você está solicitando um recurso em uma origem diferente (domínio), então ele envia uma verificação preflight (usando o tipo de método de solicitação OPTIONS, não GET, POST etc), para ver se o servidor diz que está ok para receber o pedido. É uma medida básica de segurança do navegador para reduzir a chance de um site de terceiros usar sua API - o que você pode não querer. O código acima basicamente diz que está tudo bem para um site específico consumir a API. Se puder ser consumido por todos os sites, você definirá Access-Control-Origin: * .

Como alternativa, se você não controlar o servidor ao qual está fazendo a solicitação, exponha uma rota no servidor que está servindo a página, o que faz (proxies) a solicitação para você. Isso funciona porque a rota exposta tem a mesma origem (domínio) de seu aplicativo, então a política CORS não é aplicada, e o servidor que você expôs a rota não é um navegador, então não receberá um erro CORS.

@ Aitchy13, o servidor API ao qual estou me conectando tem Access-Control-Origin: * , o console me dá este erro como neste problema,

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://<my_api_host>/Data/Login/’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

Também você diz, para adicionar ...

res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');

... mas não é Access-Control-Allow-Origin apenas para respostas, não pedidos?

Não suportado se Access-Control-Allow-Origin : * ... muito estranho.

Aqui estão alguns dos cabeçalhos de resposta da API para algumas referências para ajudar no auxílio a possíveis soluções futuras:

(Isso está fora de uma solicitação de método OPTIONS antes da solicitação real que é negada devido ao CORS)
CABEÇALHOS DE RESPOSTA

HTTP/1.1 204 No Content
Date: Fri, 28 Jun 2022 04:08:58 GMT
Server: Apache
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Headers: api-key,content-type

Vary: Access-Control-Request-Headers
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive

Ou eu tenho algo errado? Estava prestes a quebrar meu laptop ao meio por causa desse problema.

Tive o mesmo problema, depois de várias tentativas, testando algumas soluções, nenhuma funcionou. somente depois de definir o proxy no package.json.
adiciona:
"proxy": "endereço da API"
que contornará os cors.

@IkarosFeitosa Você pode postar sua configuração de proxy de configuração?

@zacharytyhacz você não pode enviar credenciais do navegador quando o servidor responde com Access-Control-Allow-Origin: * .

Qualquer:

1. altere * para ser um endereço de site específico.
2. defina ...withCredentials: false no parâmetro config / options da função de solicitação axios que você está usando.
3. defina a propriedade proxy no parâmetro config / options da função de solicitação axios que você está usando, para um proxy válido (exemplo abaixo)

proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }

Algum progresso? Eu configuro meu servidor web para definir o cabeçalho resposne, mas parece que não funciona.

Estou confundindo esta dica de erro:

CORS deve ser o limite do navegador da web, ele precisa de permissão de retorno do servidor, eu já permito este cors, mas o navegador me disse No 'Access-Control-Allow-Origin' header is present on the requested resource .

Eu tento minha configuração de cors de servidor com fetch api, ele funciona bem.

Se você estiver usando nodejs com express . Esse post pode te ajudar.

Se você quiser que apenas algum caminho tenha cors permitidos, por exemplo:
/home/fridge - não permitido de outras origens
/home/toilet - deve ser permitido de outras origens

Você pode tentar a seguinte implementação (funcionou para mim)

Em routes / home.js

const express = require('express')
const router  = express.Router()

router.options("/toilet", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.send(200);
});

Se você não usa nodejs com express - tente pesquisar no Google por solicitação de método OPTIONS

Testado do expresso: 4.16.3

Não, :) É problemas no desenvolvimento (usamos http)
quando lançamos no servidor (usamos https)
Isso não aconteceu.
Portanto, basta instalar o complemento: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

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');
próximo();
});

Isso resolveu minha vida !!

Obrigado pela sugestão. Eu atualizei meu código para encaminhar a solicitação por meio de um proxy:

axios.get('https://a.4cdn.org/a/threads.json', {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  proxy: {
    host: '104.236.174.88',
    port: 3128
  }
  }).then(function (response) {
      console.log('response is : ' + response.data);
  }).catch(function (error) {
      if (error.response) {
        console.log(error.response.headers);
      } 
      else if (error.request) {
        console.log(error.request);
      } 
      else {
        console.log(error.message);
      }
  console.log(error.config);
});

No entanto, ainda estou recebendo este erro:

Solicitação de origem cruzada bloqueada: a política da mesma origem não permite a leitura do recurso remoto em https://a.4cdn.org/a/threads.json. (Motivo: o cabeçalho CORS 'Access-Control-Allow-Origin' não corresponde a ' https://boards.4chan.org ').

Eu pesquisei vários fóruns e perguntas no Stack Overflow e não consigo encontrar nenhuma solução para isso. Agradeceríamos se alguém pudesse fornecer algumas dicas.

Olá pessoal, experimentem antes da chamada do axios, funcionou para mim

headers.set('Content-Type', 'application/json')

esta foi a minha solução

const key = 'sdmhfkhskdfhkshdkfhsdhfksl';
    const locationUrl = `https://api.fjdsghfjsdghfjgshdjfg`;
    axios.defaults.headers.common['x-api-key'] = key;
    const myresult = await axios.get(locationUrl, { crossdomain: true }).then((result) => {
        return result.data;
    });

Vou criar um vídeo sobre como consertar esse problema CORS. Vou atualizar este comentário com um link para meu vídeo no YouTube.

Editar:
https://youtu.be/hxyp_LkKDdk

agora é 2021, há alguma atualização? 😃

Sim, eu gosto tanto das minhas merdas que realmente tive que verificar as merdas daquele ano 😆

Apenas use fetch para testar se o código do servidor funciona primeiro.

E...

axios pode solicitar meu koa-server , mas não iris diretamente, ambos armam cors-middleware popular.

1358

Por que não há solução oficial para esse problema? Eu li todo este tópico e estou perplexo com o que parece ser um problema universal que ninguém está realmente resolvendo de qualquer maneira padrão.

Por que não há solução oficial para esse problema? Eu li todo este tópico e estou perplexo com o que parece ser um problema universal que ninguém está realmente resolvendo de qualquer maneira padrão.

Todo o problema do CORS não é Axios, nem mesmo o próprio JavaScript. É um recurso de segurança embutido na maioria ou em todos os navegadores. Existem maneiras de "hackear" isso, mas cabe ao servidor responder com os cabeçalhos corretos.

Por que não há solução oficial para esse problema? Eu li todo este tópico e estou perplexo com o que parece ser um problema universal que ninguém está realmente resolvendo de qualquer maneira padrão.

Todo o problema do CORS não é Axios, nem mesmo o próprio JavaScript. É um recurso de segurança embutido na maioria ou em todos os navegadores. Existem maneiras de "hackear" isso, mas cabe ao servidor responder com os cabeçalhos corretos.

Então, dada essa resposta, qual é a maneira mais "bem-sucedida" de implementar uma correção para um problema de CORS?

Ok, depois de dois dias de pesquisa finalmente entendi.

Falando estritamente, esta não é uma questão de axios. Na verdade, isso nem deve ser considerado um problema. axios foi projetado para funcionar seguindo todos aqueles padrões CORS estranhos e irritantes, então a mensagem: CORS header ‘Access-Control-Allow-Origin’ missing é esperado que aconteça, esse é o funcionamento correto dos axios. No exemplo com a api 4chan, como foi dito antes, o problema não é axios, é a própria api 4chan que não está seguindo os padrões CORS.

Algumas pessoas sugeriram o velho truque de usar um proxy para lidar com 7evitar todas as validações de cabeçalhos. Aqui está um blog de Negar Jamalifard explicando como fazer o truque: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 A propósito , Não tenho certeza se isso pode ser considerado uma prática ruim.

No meu caso, estive dois dias tentando me conectar a um asp net core api em meu próprio localhost até que percebi que axios, antes de enviar meu pedido get, estava enviando automaticamente um "preflight requests" que é enviado como um método OPTIONS do meu servidor não preparado para lidar. Se há alguém que culpa é ao chrome e firefox por exibir uma mensagem tão ambígua.

Algumas pessoas sugeriram o velho truque de usar um proxy para lidar com 7evitar todas as validações de cabeçalhos. Aqui está um blog de Negar Jamalifard explicando como fazer o truque: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 A propósito , Não tenho certeza se isso pode ser considerado uma prática ruim.

Portanto, apenas proxy é o melhor caso possível para essas chamadas? Isso é uma vergonha.

Portanto, apenas proxy é o melhor caso possível para essas chamadas? Isso é uma vergonha.

Bem ... você também pode tentar falar com o cara que criou a API que você está tentando consumir e pedir que eles consertem.

Eu resolvi o problema:
para axios: url = " http: // localhost : 8080" method = 'post'
para minha resposta do servidor Django:
uesrItem = {'usuário': 'xxx'}
resposta = JsonResponse (userItem)
response ["Access-Control-Allow-Origin"] = " http: // localhost : 8080"
resposta ["Access-Control-Allow-Credentials"] = 'true'
resposta ["Access-Control-Allow-Methods"] = "POST, OPÇÕES"

O problema não é axios, mas a API que você está solicitando!

Por exemplo, codifiquei uma API no Flask e o método GET foi:

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    return make_response(jsonify(drivers_json), 201)

Mas o problema foi resolvido quando adicionei um cabeçalho na resposta da API:

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    response = jsonify(drivers_json)
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

Então eu registro minha resposta axios e eu entendo:

{data: Array(4), status: 200, statusText: "OK", headers: {…}, config: {…}, …}

Não sei qual API vocês estão usando mas no Flask foi resolvido!

No meu caso, não havia nada de errado com axios. Acabei de perguntar ao cara que criou a API para habilitar o CORS do lado do servidor.

tente isso

delete axios.defaults.headers.common["X-Requested-With"];

Eu usei a https://github.com/Rob--W/cors-anywhere solução alternativa e funciona muito bem, mas na produção vou pedir ao cara que fez a API para habilitar cors para meu domínio

Não acho que você possa resolver o CORS diretamente no axios, porque o CORS é uma restrição do navegador que fica entre o seu navegador e os servidores de destino.

Você também pode:

1. Inclua Access-Control-Allow-Origin em seus cabeçalhos de resposta do servidor de destino .
2. Não inclua o nome do host em sua solicitação axios, então ele solicitará seu servidor original . Então, a partir do servidor original, você pode fazer o que quiser com o servidor de destino.

Mencione um exemplo de snippet de código detalhado.
Será útil.

Eu estava tendo o mesmo problema no meu local.
Eu adicionei cors no meu back-end e resolvi. :)

Este não é o problema com o axios Este é o problema com o back-end. Estou usando Django. E adicionar esses dois resolverá o problema.

Adicionar CORS Middlewear

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]

E permitindo o CORS.
(Permitindo CORS para todos)

CORS_ORIGIN_ALLOW_ALL = True

(Isso é um pouco inseguro, pois permite todas as origens. O que o tornará vulnerável a ataques CSRF)
Portanto, para a produção, permita apenas origens específicas

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '<YOUR_DOMAIN>[:PORT]',
)

Exemplo: +1:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

Olá a todos,
Como já foi mencionado, esse problema é uma proteção do navegador contra solicitações de origem cruzada. Resolvi seguindo estas instruções: https://support.google.com/chrome/thread/11089651?hl=en

Para aqueles que ainda estão lutando:
Espero que agora você compreenda que isso não é um problema com o Axios e que o navegador está bloqueando o CORS por causa de um cabeçalho não definido pelo servidor. Se você entende isso e ainda está tendo problemas com o seu próprio servidor e não configurando os cabeçalhos, certifique-se de configurá-lo no seu servidor web real ao usar um proxy reverso. Por exemplo, muitos aplicativos Node / Express são atendidos por NGINX em produção com um proxy reverso. Consulte enable-cors.org para saber como configurá-lo no NGINX.

Para aqueles que ainda estão lutando:
Espero que agora você compreenda que isso não é um problema com o Axios e que o navegador está bloqueando o CORS por causa de um cabeçalho não definido pelo servidor. Se você entende isso e ainda está tendo problemas com o seu próprio servidor e não configurando os cabeçalhos, certifique-se de configurá-lo no seu servidor web real ao usar um proxy reverso. Por exemplo, muitos aplicativos Node / Express são atendidos por NGINX em produção com um proxy reverso. Consulte enable-cors.org para saber como configurá-lo no NGINX.

Estou lutando há 3 horas, nada muda no lado do cliente, finalmente adicionei o seguinte no servidor:

instalar egg-cors (apenas para projeto de ovo)

// ./config/config.default.js

config.cors = {
    origin: ["http://localhost:8080"],
    allowedHeaders: [
      "Content-Type",
      "Authorization",
      "Access-Control-Allow-Methods",
      "Access-Control-Request-Headers"
    ],
    credentials: true,
    enablePreflight: true
  };

Isso é tudo

const board = this.props.routeParams.tag;
axios.get('https://cors-anywhere.herokuapp.com/' + 'https://a.4cdn.org/' + board + '/threads.json', config)
.then(function (response) {
console.log(response.data);
});

Apenas use fetch para testar se o código do servidor funciona primeiro.

E...

axios pode solicitar meu koa-server , mas não iris diretamente, ambos armam cors-middleware popular.

1358

Isso funcionou para mim e preciso saber por que

Eu estava trabalhando com Tornado e Vuejs, axios não era o problema, no meu back-end aded:

# Tornado
class ClassName(tornado.web.RequestHandler):
    def set_default_headers(self):
        self.set_header("Content-Type", "application/json")
        self.set_header("Access-Control-Allow-Origin", "*")
        self.set_header("Access-Control-Allow-Headers", "content-type")
        self.set_header(
            'Access-Control-Allow-Methods',
            'POST, GET, OPTIONS, PATCH, PUT'
        )

@robertjchristian
Funcionou
Verrrrrrrrrrry Obrigado

Estou tendo o mesmo problema
Meu código
axios ({
método: "get",
url: "http: // localhost: 4000 / users",
})
.então (resposta => {
console.log (resposta);
})
.catch (Erro => {
console.log (erro)
});
}
Obtendo este erro
O acesso a XMLHttpRequest em ' http: // localhost : 4000 / users' da origem ' http: // localhost : 3000' foi bloqueado pela política CORS: Resposta à solicitação de comprovação não passa na verificação de controle de acesso: Não 'Access-Control O cabeçalho -Allow-Origin 'está presente no recurso solicitado.

Alguém poderia me dar uma solução passo a passo para o que devo fazer?

@albertpinto Em primeiro lugar, você deve entender que axios não é o problema, o "backend" que você está usando precisa ser capaz de receber dados externos. então no google você pode pesquisar. algo como _ativar cors (coloque a linguagem ou estrutura que você está usando) _

@albertpinto veja todas as soluções possíveis neste mega thread. Não é um problema do lado do cliente / front-end do seu lado - é na verdade o servidor (localhost: 4000). O servidor precisa responder com cabeçalhos CORS para permitir a origem.

Por exemplo, seu servidor deve responder com cabeçalhos como:

Access-Control-Allow-Origin:  *
Access-Control-Allow-Headers: Content-Type

Resolvi isso da seguinte maneira:

1. Instale cors npm: npm install cors (em seu servidor de nó de descanso no meu caso http: // localhost: 4000)

Isso também se aplica ao seu ponto final:
var cors = require ('cors')
var express = require ('express')
var cors = require ('cors')
var app = express ()
app.use (cors ())

Obrigado por todas as sugestões!

// Para CORS, se você usar express js, pode simplesmente usar o pacote cors via npm.

app.use(
    cors({
        credentials: true,
        origin: [
            'http://localhost:8080',
            'http://your-production-website.com'
        ]
    }),
)

cURL não impõe regras CORS. Essas regras são aplicadas por navegadores para fins de segurança.

Quando você menciona que adicionou o cabeçalho relevante, presumo que quer dizer que você adicionou esses cabeçalhos à solicitação. Na verdade, o cabeçalho é esperado nos cabeçalhos de resposta do servidor, indicando que o recurso pode ser acessado por outros sites diretamente.

FYI, CORS - Compartilhamento de recursos de origem cruzada. Como sua API não oferece suporte, você tem duas opções -

1. Use um servidor proxy no mesmo domínio de sua página da web para acessar a API do 4chan ou,
2. Use um servidor proxy em qualquer outro domínio, mas modifique a resposta para incluir os cabeçalhos necessários.

Eu gostaria de votar para fechar este problema como "Não é um problema".

@sunnykgupta
mesma lógica, mesmo corpo, mas a solicitação de postagem http angular para o endpoint de back-end remoto não recebe erro de bloco CORS

Se você tiver um servidor Go em execução, sugiro que use o Gorilla

headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

err := http.ListenAndServe("localhost:8081", handlers.CORS(originsOk, headersOk, methodsOk)(r))

Resolvi isso da seguinte maneira:

1.crie um arquivo vue.config.js na raiz do projeto ao lado do package.json, contendo:

module.exports = {
    devServer:{
        proxy: {
            '/apiv1': {
                target: 'https://fuping.site/',
                changeOrigin: true,
                pathRewrite: {
                    '^/apiv1': ''
                }
            },
        },
    }
}

2.faça uma solicitação http como esta:

this.$axios({
          method:'get',
          url:'apiv1/about/',

        }).then(function(response){
          console.log(response.data)
        }).catch(error=>{
          console.log(error)
        })

axios.get ('https://a.4cdn.org/a/threads.json', {
cabeçalhos: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
proxy: {
host: '104.236.174.88',
porta: 3128
}
}). então (função (resposta) {
console.log ('a resposta é:' + resposta.data);
}). catch (função (erro) {
if (error.response) {
console.log (error.response.headers);
}
else if (error.request) {
console.log (error.request);
}
outro {
console.log (error.message);
}
console.log (error.config);
});

Olá pessoal,
Estou postando isso porque demorei horas para resolver isso.

Em primeiro lugar, CORS é definitivamente um problema do lado do servidor e não do lado do cliente, mas eu tinha certeza de que o código do servidor estava correto no meu caso, já que outros aplicativos estavam trabalhando usando o mesmo servidor em domínios diferentes. O problema começou quando comecei a usar axios com minha instância personalizada.

No meu caso, foi um problema muito específico quando usamos uma instância baseURL em axios e, em seguida, tentamos fazer GET ou POST chamadas de qualquer lugar, axios adiciona uma barra / entre baseURL e o URL de solicitação. Isso também faz sentido, mas era o problema oculto. Meu servidor Laravel estava redirecionando para remover a barra final que estava causando o problema.

Em geral, a solicitação pré-voo OPTIONS não gosta de redirecionamentos. Então, definitivamente verifique isso e evite.

Espero que isso possa ajudar alguém, embora nada disso seja um bug.