cURL no hace cumplir las reglas de CORS. Los navegadores hacen cumplir esas reglas por motivos de seguridad.

Cuando mencionas que agregaste el encabezado relevante, supongo que te refieres a que agregaste esos encabezados a la solicitud. En realidad, se espera el encabezado en los encabezados de respuesta del servidor, lo que indica que otros sitios web pueden acceder al recurso directamente.

FYI, CORS - Intercambio de recursos de origen cruzado. Dado que su API no lo admite, tiene dos opciones:

1. Utilice un servidor proxy en el mismo dominio que su página web para acceder a la API de 4chan o,
2. Utilice un servidor proxy en cualquier otro dominio, pero modifique la respuesta para incluir los encabezados necesarios.

Me gustaría votar para cerrar este problema como "No es un problema".

Gracias por la sugerencia. He actualizado mi código para enrutar la solicitud a través de un 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);
});

Sin embargo, sigo recibiendo este error:

Solicitud de origen cruzado bloqueada: la política de mismo origen no permite leer el recurso remoto en https://a.4cdn.org/a/threads.json. (Razón: el encabezado CORS 'Access-Control-Allow-Origin' no coincide con 'https://boards.4chan.org').

He buscado en varios foros y preguntas sobre Stack Overflow y parece que no puedo encontrar ninguna solución a esto. Se agradecería que alguien nos diera alguna información.

¿Alguna noticia sobre esto? Estoy prácticamente en el mismo barco ...

Solicitud de origen cruzado bloqueada: la política de mismo origen no permite leer el recurso remoto en https://a.4cdn.org/a/threads.json. (Razón: el encabezado CORS 'Access-Control-Allow-Origin' no coincide con 'https://boards.4chan.org').

Esto se debe a que https://a.4cdn.org y https://boards.4chan.org se consideran dominios diferentes. La diferencia está en una y tableros

También tengo el mismo problema. ¿Alguien puede ayudarme con esto?

saaaaame

Como solución temporal, puede usar esto: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

No encontré nada mejor por ahora ..

@PetitBateau No estoy seguro de cómo la extensión de Chrome ayudaría a enviar solicitudes a través de axios.

@ adl1995 Me hizo el truco;)

Una extensión de Chrome solo ayuda a aquellos que tienen la extensión. Depender de la extensión de Chrome en producción no es una buena idea, ya que no todos tienen esa extensión.

Por eso dije que era una solución temporal. Y, por supuesto, para un entorno de desarrollo.

Access-Control-Allow-Origin es un encabezado de respuesta, no un encabezado de solicitud:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

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

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

@ronnin Para que conste, probé tu solución, pero no funciona.

El servicio remoto al que está realizando su solicitud AJAX no acepta solicitudes AJAX de origen cruzado de su dominio. Una cosa que puede hacer si tiene acceso a la base de código del lado del servidor de su sitio web es crear una acción de controlador allí (asumiendo que está usando un MVC) y luego usarlo para consumir el servicio remoto. A continuación, puede realizar solicitudes AJAX a la acción de su controlador. Una ventaja de este enfoque es que puede realizar comprobaciones adicionales antes de ponerse en contacto con el servicio remoto, formatear su respuesta e incluso almacenarla en caché.

Lean esto a todos.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Siempre encuentro que la referencia a ese documento MDN no es muy útil. Es un documento largo y no aborda directamente la cuestión en cuestión. ¿Qué hago si no tengo acceso al código base del lado del servidor y quiero acceder a esta API?

Mi solución es crear mi propia API en mi servidor de dominio para acceder a cualquier API externa que no permita solicitudes de origen cruzado, la llamo mi API repetidora.

@JigzPalillo ¿Puedes compartir el enfoque o el código? ¡Estoy bastante atascado! :(

Normalmente esto funcionaría, pero en el caso de que no funcione y no tengas acceso a ese dominio ...

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

Lo que hice fue crear un repetidor en mi 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"]);

El servidor debe responder con encabezados CORS en la llamada de opciones. Si está utilizando nodejs / express, puede solucionar esto para todos los puntos finales con:

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

Pero eso es un poco flojo. Probablemente quiera ajustarlo para la producción.

Sin embargo, he resuelto ese problema durante mucho tiempo. El servidor pertenece a un servicio 3p y, por lo tanto, está fuera de mi control. En su lugar, simplemente lo sustituí. Todo está bien en ese frente.

Gracias

@steveswork lo mismo aquí, el servidor pertenece a un servicio 3p, es bastante triste que pueda usar ajax, request.js pero no axios, que prefiero 👎

@ adl1995 ¿puede solucionar este problema todavía? Confundo totalmente cómo manejar este error

es 2018 ahora, ¿hay alguna actualización?

@ challengeger532 Nop Todavía no.

El error aún prevalece.

Mi consejo: use una biblioteca diferente .

Bien, esto resolvió un poco mi problema. Verá, estoy trabajando con vuejs y Laravel ... configuré mi ruta web de Laravel en php de la siguiente manera:

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

luego el archivo vuejs simplemente usé axios para enviar una solicitud a mi ruta:

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

y listo, funciona bien.

si usa Laravel, función de adición:

encabezado ('Access-Control-Allow-Origin: *');

al controlador o ruta antes de regresar
Ejemplo:
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
Lo siento por mi ingles. Espero que esto le pueda ayudar.

Utilizo vue.js (puerto localhost 8080) y Flask para mi API (puerto localhost 5000)

Simplemente tuve que hacer un pequeño cambio en mi código de API (Flask en el puerto 5000).
Agregué la extensión del matraz flask-CORS y modifiqué mi código para usarlo.
Antes:

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

Después:

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

Después de esto funcionó y pude usar mi API.
Por lo tanto, no es realmente un problema de axios, sino un problema de API y recibe una advertencia de Firefox, no de llamar a la función axios.get.

Al configurar los encabezados y las opciones de proxy, obtuve en su lugar Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. .

Pero pude evitar eso con esta extensión: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en .

Lamentablemente, eso funcionó solo ayer y no hoy ... He estado tratando de averiguar por qué

Solicitudes de proxy utilizando el servidor de desarrollo Webpack para evitar _cors_ en el modo de desarrollo

En su archivo webpack.config agregue

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

El ejemplo anterior representará la solicitud.
axios.post(/api/posts/1 ... . . . .
hasta https://my-target.com/posts/1

El ejemplo de Git anterior, debe cambiar así en su solicitud

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

En el archivo webpack.config ........

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

el proxy de configuración del paquete web modificado cambiará su solicitud de esta manera ...

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

Puedes usar múltiples rutas en devServer proxy como este
En el archivo 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
    }
  }
}

Úselo si lo necesita

    "changeOrigin": true,
    "secure": false

Pasé horas para arreglarlo y parece que no hay ayuda en todas partes. la forma simple y rápida es agregar una extensión de Chrome llamada Allow-Control-Allow-Origin *. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=es

solo te ayudará a ti, pero ¿qué hay de otras personas?

De alguna manera útil: https://github.com/shalvah/cors-escape

probando Vue y axios obviamente obtuve el mismo problema.

Acabo de probar la solución proporcionada por sundar6445 y funciona perfectamente.
El archivo de configuración del paquete web que modifiqué está en/config/index.js. Preferí modificar este ya que se hace referencia en/build/webpack.dev.conf.js

En ella encuentras

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

Como lo describe sundar, cambie la proxyTable por, por ejemplo, algo como

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

lo que significa que todo lo que comience por / events se enrutará a http: // localhost : 3000 / events. No 'pathRewrite' en mi caso, la URL relativa será la misma.

y, por supuesto, no olvide eliminar la URL completa en su componente Vue. Tuve:

  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 vuelve:

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

y funciona perfectamente bien. Gracias a @ sundar6445

Espero que esto ayude

Sé que esto está marcado como cerrado, pero quería señalar algo. A veces, este error aparecerá en el lado del cliente si su clave de API ha expirado o está siendo utilizada por otra persona.

Esto puede ser evidente para los desarrolladores más experimentados, pero para aquellas personas nuevas en la codificación, asegúrese de tener una clave API única. No todas las API requieren claves únicas, pero si las necesitan, seguramente las necesitará. Consulte la documentación de la API de su API específica para ver qué requieren.

No hay ninguna opción como crossDomain dentro de Axios. Estudie el código fuente antes de dar / usar pistas incorrectas.

No puede ejecutar JavaScript en un cliente (sin deshabilitar CORS y convertirlo en un objetivo para XSS) para recuperar información de otro sitio.

Esto es para evitar que obtenga acceso al navegador de un cliente y potencialmente agote sus cuentas bancarias o publique en algún sitio sin sus permisos. Lo mismo ocurre con los sitios de raspado (que es esencialmente lo que la operación está tratando de hacer).

Puede raspar la web (es decir, ir a buscar los datos) utilizando un servidor con un módulo CORS, y el proxy a través de ese servidor.

Creo que esta configuración de encabezado resolverá este problema.

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

Gracias

Sé que esto suena a cliché, pero mi solución a este problema ha sido crear una API personalizada para manejar estas llamadas.

El problema no está en los axios. El problema está en el servidor. Cuando entregue datos, debe agregar los siguientes encabezados antes de enviarlos.

Access-Control-Allow-Origin debe establecerse en *

Access-Control-Allow-Headers debe establecerse en Origin, X-Requested-With, Content-Type, Accept

Fuente: error CORS al realizar la llamada axios.get

Refiriéndome a estas respuestas, agregué esas líneas a mi servidor backend express, así:

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

fuente: CORS en ExpressJS

Y todo funciona bien para mí, sin ninguna configuración adicional en axios o en la interfaz, por lo que realmente no es un problema de axios sino una falta de configuración del encabezado del lado del servidor.

Finalmente, creo que esta otra respuesta sobre stackoverflow , cubre bastante bien el tema:

Cómo evitar la verificación previa de CORS
Cómo utilizar un proxy CORS para solucionar los problemas de "encabezado sin control de acceso y permiso de origen"
Cómo solucionar los problemas de "Access-Control-Allow-Origin encabezado no debe ser el comodín"

Espero eso ayude.

si desea obtener datos de una API o URL de terceros que tiene un problema con su encabezado CORS (falta o contiene varios valores), creo que la única solución para esto es usar este enlace
" https://cors-anywhere.herokuapp.com/ "
Utilizo el enlace para proyectos pequeños, pero para proyectos grandes, es posible que desee crear su propia api para manejar las llamadas y crear la api puede usar el proyecto de código abierto https://github.com/Rob--W/cors-anywhere / .

Este funcionará:

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

Me encontré con este problema hace algún tiempo mientras creaba 4webm y 4chan-list-webm

Vale la pena señalar que si crea un complemento de navegador, no necesita jugar con los encabezados para acceder a la API. Tal vez si invocamos a

dominio cruzado: verdadero

Tuve que habilitar el puerto '8080' en el CORS de backend y luego funcionó.

seguro

documentación del paquete web para una mejor comprensión: https://webpack.js.org/configuration/dev-server/#devserver -proxy

Si está utilizando laravel o lumen para su API de backend. Y ya está usando el paquete barryvdh / laravel-cors. La solución es establecer su configuración cors.php como encabezado, método y parte de origen como esta
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
Con suerte, resuelve el problema de alguien.

Si lo hace en safari, no lleva tiempo. Simplemente habilite el menú de desarrollador desde Preferencias >> Avanzado y seleccione "Deshabilitar restricciones de origen cruzado" en el menú de desarrollo. Si desea solo local, solo necesita habilitar el menú de desarrollador y seleccionar "Desactivar restricciones de archivos locales" en el menú de desarrollo.

y en Chrome para OSX abra Terminal y ejecute:

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

--user-data-dir requerido en Chrome 49+ en OSX

Para ejecutar Linux:

$ google-chrome --disable-web-security
Además, si está intentando acceder a archivos locales con fines de desarrollo como AJAX o JSON, también puede usar esta marca.

-–allow-file-access-from-files
Para Windows, vaya al símbolo del sistema y vaya a la carpeta donde está Chrome.exe y escriba

chrome.exe --disable-web-security
Eso debería deshabilitar la misma política de origen y permitirle acceder a archivos locales.

Probé toda la solución mencionada anteriormente. nada funciona.
finalmente encontré uno - https://github.com/expressjs/cors
espero que les ayude chicos

El problema principal es la diferencia entre las solicitudes del servidor y las solicitudes del cliente.

Cuando realiza solicitudes a través del cliente (también conocido como la mayoría de las veces, un navegador), está a merced del software del navegador. El estándar para el software del navegador es evitar cualquier intento de actividad maliciosa que pueda o no provenir de su propio software.

Si realiza una solicitud desde su propio servidor (también conocido como no un cliente de navegador), lo que se da es que para el código que ha escrito usted mismo, nadie (dependiendo de la configuración de su servidor) puede acceder ni controlarlo, y usted sabe qué Los tipos de solicitudes son salientes, por lo que no hay preocupaciones de que las llamadas de red se produzcan fuera de su entorno o de su conocimiento.

Es por eso que los navegadores son estrictos con las solicitudes de origen cruzado, específicamente porque una vez que su código público está en el cliente, tiene menos control sobre quién lo ve / quién puede manipularlo. En el caso de que su aplicación de interfaz se vea comprometida y algún software malicioso pueda realizar llamadas de red desde su código a expensas de sus visitantes / usuarios, ellos quieren asegurarse de que no suceda. Por lo tanto, su midominio.com no puede realizar llamadas a allyourdataarebelongtome.com en caso de que no quisiera que sucediera.

La solución aquí no es que las solicitudes entre dominios no funcionen, es que su propio servidor lo impide y debe adaptarse a esta circunstancia al aceptar su dominio de origen, o que el servidor de terceros al que está tratando de realizar llamadas API tiene algún otro método de autenticación / autorización además de esa solicitud de dominio cruzado.

@mddanishyusuf La solución funcionó para mí.

Creo que esta configuración de encabezado resolverá este problema.

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

Gracias

¡Gracias! ;)

Desde aquí: https://github.com/axios/axios Me he dado cuenta de que no ponen la URL completa en la solicitud de URL de axios.

Así que trato de resolver esto creando mi propia API en mi sitio. Acabo de enviar una solicitud como esta

axios.get('/sample/request')

luego http://127.0.0.1 : 8080 / sample / request enviará otra solicitud a https://a.4cdn.org/ y devolverá las respuestas a axios como json.

Es un trabajo para mi, espero que pueda ayudarte

https://github.com/axios/axios/issues/853#issuecomment -408218917 funcionó con fetch API y una API web .NET 4.5.

Según tengo entendido, el problema es que la solicitud se envía desde loclahost: 3000 a loclahost: 8080 y el navegador rechaza solicitudes como CORS. Entonces, la solución fue crear un proxy y el navegador manejará las solicitudes a medida que se vayan de un servidor.
Corrígeme si estoy equivocado

Mi solucion fue:
importar proxy desde 'http-proxy-middleware'
app.use ('/ api / **', proxy ({destino: "http: // localhost: 8080"}));

Yo estaba con el mismo problema y lo solucioné instalando 'cors' en mi backend (Express).

Correr:
npm instalar cors

Entonces simplemente configure esto:

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

Gracias @fernandoruch , esto está funcionando con mi servidor nodejs

Tuve el mismo problema y lo resolví

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

Funcionó al principio, pero luego se detuvo y no pude entender por qué.

luego me di cuenta de que moví todo mi código a otro archivo, así que necesito usar el enrutador:

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

Hola,

Cualquier actualización sobre este problema, estoy usando .net core 2.1 y axios 0.18.

Gracias.

No creo que el problema esté en axios, el problema está en su servidor back-end.

Para mí, tengo una arquitectura con Flask en el back-end y usando axios en Vue.JS, lo único que tenía que hacer en mi servidor Flask es:

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

Sin embargo, esto no debería ir a producción, también puede tener una lista de permitidos de origen cruzado en el nivel de nginx. Leí esto , podría ser útil.

Como solución temporal, puede usar esto: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

No encontré nada mejor por ahora ..

Mala idea

Me encontré con este problema cuando intenté simplemente hacer una solicitud axios.get() a la API meteorológica de Darksky. Cuando leí la página de preguntas frecuentes de Darksky, encontré una pregunta con respecto a este mismo problema exacto, respondieron diciendo que usaban esto como una medida de seguridad para evitar el acceso malicioso no intencional a su información y sugirieron crear un proxy para acceder a su base de datos.

Hice el siguiente cambio en mi archivo package.json (estoy usando create-react-app):

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

Darksky me proporcionó myKey para acceder a sus datos.

¡Esta fue una solución súper simple y funcionó para mí! Sospecho que muchos servicios de API comenzarán a usar esto como una medida de seguridad. Espero que mi solución pueda ayudar a otros con problemas similares.

En resumen: crea un proxy.

Gracias @fernandoruch . Me funciona cuando lo agrego a app.js de mi 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 con relleno o JSON-P) se utiliza para solicitar datos de un servidor que reside en un dominio diferente al del cliente. JSONP permite compartir datos sin pasar por la política del mismo origen.

Solo uso $ .get de jquery para llamadas de API externas.

si desea obtener datos de una API o URL de terceros que tiene un problema con su encabezado CORS (falta o contiene varios valores), creo que la única solución para esto es usar este enlace
" https://cors-anywhere.herokuapp.com/ "
Utilizo el enlace para proyectos pequeños, pero para proyectos grandes, es posible que desee crear su propia api para manejar las llamadas y crear la api puede usar el proyecto de código abierto https://github.com/Rob--W/cors-anywhere / .

Este funcionará:

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

@yasincidem - Eres un diamante absoluto por esta sugerencia. Saludos: he seguido muchos senderos en la web en busca de una solución y la suya es la primera que ha funcionado para mi escenario particular.

Acabo de cruzar este tema. Tenía {withCredentials: true} (una copia y pegado de mi otra API) para que esta API de terceros en particular funcione, simplemente eliminé {withCredentials: true}

Esta solución funciona para mi

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

referencia https://stackoverflow.com/questions/42422494/cross-domain-at-axios

si desea obtener datos de una API o URL de terceros que tiene un problema con su encabezado CORS (falta o contiene varios valores), creo que la única solución para esto es usar este enlace
" https://cors-anywhere.herokuapp.com/ "
Utilizo el enlace para proyectos pequeños, pero para proyectos grandes, es posible que desee crear su propia api para manejar las llamadas y crear la api puede usar el proyecto de código abierto https://github.com/Rob--W/cors-anywhere / .

Este funcionará:

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

¡¡¡Funciona extraordinario !!!

también encontramos este problema al cambiar a axios
nuestra configuración es webpack + devServer (con proxy) + axios

el problema fue que usamos nuestra URL de API completa como baseURL en axios en lugar de solo '/ api' (el proxy hace el mapeo a través del atributo de destino)

En mi opinión, esto podría deberse a nuestros propios errores. Estoy experimentando el mismo problema que el anterior. 2 días me tomé el tiempo para buscar este problema. resulta que es solo un pequeño problema que encontré. la dirección URL que ingresé no está de acuerdo con la documentación del análisis. y ahora axios funciona perfectamente en mi angular 7

Compruebe si el matraz u otro servidor tiene CORS habilitado.
También verifique si la dirección del servidor es correcta. Me quedé atascado solo porque olvidé agregar el puerto del servidor.
axios.get ('http: // localhost: 5000 / jsonshow')
.entonces (respuesta => (this.array = respuesta))

Cambiar " localhost: 3000 " a " http: // localhost : 300" funciona bien conmigo (asegúrese de habilitar cors en el servidor)

Cambiar " localhost: 3000 " a " http: // localhost : 300" funciona bien conmigo (asegúrese de habilitar cors en el servidor)

si está ejecutando en el puerto 300 y no en el 3000.

en VueJS puede crear un vil llamado vue.config.js en la raíz del proyecto si no existe y agregar algo como

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

Entonces su llamada Axios debería verse así

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

si desea obtener datos de una API o URL de terceros que tiene un problema con su encabezado CORS (falta o contiene varios valores), creo que la única solución para esto es usar este enlace
" https://cors-anywhere.herokuapp.com/ "
Utilizo el enlace para proyectos pequeños, pero para proyectos grandes, es posible que desee crear su propia api para manejar las llamadas y crear la api puede usar el proyecto de código abierto https://github.com/Rob--W/cors-anywhere / .

Este funcionará:

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

¡Este funcionó para mí! ¡Gracias!

Prueba 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');

si desea obtener datos de una API o URL de terceros que tiene un problema con su encabezado CORS (falta o contiene varios valores), creo que la única solución para esto es usar este enlace
" https://cors-anywhere.herokuapp.com/ "
Utilizo el enlace para proyectos pequeños, pero para proyectos grandes, es posible que desee crear su propia api para manejar las llamadas y crear la api puede usar el proyecto de código abierto https://github.com/Rob--W/cors-anywhere / .

Este funcionará:

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

Ahorrando mi tiempo, muchas gracias!

@ronnin Para que conste, probé tu solución, pero no funciona.

¿Qué? ¿En serio? Para mí definitivamente funcionó ...
¡Para el método GET, funciona a las mil maravillas!

Aquí está el ejemplo que hice usando una API pública, basado en el comentario de @ronnin :
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

es 2019 ahora, ¿hay alguna actualización? 😃

uso esta extensión de Chrome para desarrollar mi aplicación
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

@ronnin Para que conste, probé tu solución, pero no funciona.

Los hombres que están en problemas no están bien reconocidos con CORS y deben leer el artículo @ seungha-kim mencionado anteriormente: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Como resumen:

1. Los recursos remotos que solicitó, si no están en el mismo host desde el que solicitó (llamado origen), deben proporcionar un encabezado CORS adicional junto con el recurso, también conocido como. Permitir control de acceso: host (origen), encabezados, métodos, etc.
2. solicitando por navegadores o curl con el encabezado 'Access-Control-Request-Method', solicitando con el método 'OPTIONS' se intentará primero automáticamente antes del método deseado: 'GET', 'POST', etc.
   lo que significa que los manejadores de recursos remotos deben manejar el método 'OPCIÓN' especialmente. por ejemplo (nginx):
   `` maravilloso
   location / the-remote-resource {
   if ($ request_method = 'OPTIONS') {
   add_header 'Acceso-Control-Permitir-Origen' $ 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 se mencionó anteriormente, no usé valor * para cada encabezado de Access-Control-Allow- *.
   valor *, tiene muchas restricciones.
   una. value * to Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods no puede funcionar con Access-Control-Allow-Credentials = true. si se requiere una cookie con la solicitud, necesitará Access-Control-Allow-Credentials = true
   B. solo * es válido, * .google.com no es válido

1. Access-Control-Allow-Headers es una lista de encabezados de su solicitud posiblemente junto con. la existencia de algunos encabezados que no figuran en él hará que se bloquee. simplemente marque y seleccione los encabezados en Access-Control-Allow-Headers

2. el problema no está principalmente en el cliente (navegador, su aplicación cliente), sino en el recurso solicitado por el servidor ubicado.

3. hable con su compañero de desarrollo del lado del servidor

Espero que sea de ayuda

@ronnin : Si entiendo correctamente sus puntos, significa que si mi solicitud GET está solicitando recursos de algún servidor que no habilitan CORS, básicamente no hay nada que podamos hacer desde el front-end, ¿verdad?

@ronnin : Si entiendo correctamente sus puntos, significa que si mi solicitud GET está solicitando recursos de algún servidor que no habilitan CORS, básicamente no hay nada que podamos hacer desde el front-end, ¿verdad?

Utilice la siguiente aplicación a continuación para hacer que sus solicitudes funcionen

Funcionó para mí a pesar de que el servidor no habilitó CORS

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

Uso:

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

@ronnin : Si entiendo correctamente sus puntos, significa que si mi solicitud GET está solicitando recursos de algún servidor que no habilitan CORS, básicamente no hay nada que podamos hacer desde el front-end, ¿verdad?

si mi solicitud GET está solicitando recursos de algún servidor que no habilitó CORS, básicamente no hay nada que podamos hacer desde el front-end a través de la solicitud XHR (también conocida como solicitud AJAX) directamente. ¡Sí!
Es el navegador que sigue el protocolo y rechaza su solicitud.
pero puede obtener el recurso mediante una solicitud tradicional del navegador, como location.href, iframe, form.action

Principalmente, configuramos un servidor proxy inverso propio, (como nginx), con el lado del servidor autocontrolado para resolver el problema que solicita el tercer recurso sin CORS habilitado.
La aplicación Heroku, mencionó @ndjerrou , es el caso.

tenemos autos autónomos e inteligencia artificial, pero seguimos luchando con CORS

Me las arreglé para resolver esto usando heroku como proxy.

Aquí está mi 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
                   })
            })

es 2020 ahora, ¿hay alguna actualización? 😃

Puede confirmar, es 2020 y aún no hay actualización.
fetch () tiene el modo mode: 'no-cors' , ¿por qué axios no tiene algo similar?

Lo intenté

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

Y ninguno de esos encabezados funcionó. Intenté withCredentials tanto en estados verdaderos como falsos, no funcionó.

Con fetch, simplemente funciona.

¿Qué se supone que debo hacer si no quiero lidiar con la política de CORS y sigo usando axios?
Editar: Además, ¿por qué diablos está cerrado este problema? Obviamente, todavía tenemos un problema con esto.

Debe definir 'Access-Control-Allow-Origin': 'YOUR_IP:YOUR_PORT' en los encabezados de respuesta NO en los encabezados de solicitud.

Puede confirmar, es 2020 y aún no hay actualización.
fetch () tiene el modo mode: 'no-cors' , ¿por qué axios no tiene algo similar?

Lo intenté

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

Y ninguno de esos encabezados funcionó. Intenté withCredentials tanto en estados verdaderos como falsos, no funcionó.

Con fetch, simplemente funciona.

¿Qué se supone que debo hacer si no quiero lidiar con la política de CORS y sigo usando axios?
Editar: Además, ¿por qué diablos está cerrado este problema? Obviamente, todavía tenemos un problema con esto.

No hay problema con los axios, por eso se cerró el problema. simplemente tome una silla y lea el artículo sobre MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

南辕北辙 ， 徒劳无功

¡Gracias chicos, eso ayudó! ¡Disculpe las molestias!

Tuve este error en axios cuando estaba en el punto de acceso móvil de mi dispositivo. Luego, cuando usé el WiFi en una cafetería, no obtuve un CORB

Intenté usar la API de Wikipedia y tuve el mismo problema.
Agregar origin=* a la URL lo solucionó.

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

Lo resolví al no usar axios, probé GET desde URL externas con $ ajax y $ get, no tuve ningún problema con el antiguo jquery. Seguro que es un ERROR.

es 2021 ahora, ¿hay alguna actualización? 😃

Estoy experimentando un problema similar relacionado con "Access-Control-Allow-Headers" al intentar acceder a un webhook zapier desde axios (0.18.0) y chrome (75.0.3770.100).

Mi solicitud es:

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

Recibiré un error sobre el encabezado no admitido:

bloqueado por la política CORS: el tipo de contenido del campo de encabezado de solicitud no está permitido por Access-Control-Allow-Headers en la respuesta de verificación previa

Después de leer esta página, mi entendimiento es:

• 1. Zapier necesita configurar la respuesta de su servidor para que admita Access-Control-Request-Headers para al menos "tipo de contenido"
• 1. Necesito configurar mi solicitud para excluir de alguna manera la verificación de encabezado "tipo de contenido" durante la OPT previa al vuelo.

¿Hay alguna sugerencia para lograr la opción 2? Los problemas comunes de Zapier

Editar: Estoy convencido de que esto tiene poco o nada que ver con axios, sino un apoyo bastante pobre por parte de Zapier. La solicitud parece funcionar después de cambiar a GET con parámetros de URL.

Bueno, si en las preguntas frecuentes mencionan que no necesitas ningún tipo de contenido parametros
podría probar el ol
Var xhr = new XMLHTTPRequest () y pruébelo de esa manera sin axios.

¿Su publicación en el webhook del cliente o del servidor?

El martes 25 de junio de 2019 a las 3:27 p.m., Pete Schmitz [email protected] escribió:

Estoy experimentando un problema similar relacionado con "Access-Control-Allow-Headers"
al intentar acceder a un webhook zapier desde axios (0.18.0) y chrome
(75.0.3770.100).

Mi solicitud es:

axios.post ("https://hooks.zapier.com/hooks/catch/xxx/xxxx", {correo electrónico});

Recibiré un error sobre el encabezado no admitido:

bloqueado por la política CORS: el tipo de contenido del campo de encabezado de solicitud no está permitido
por Access-Control-Allow-Headers en la respuesta previa al vuelo

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

Después de leer esta página, mi entendimiento es:

-
1. Zapier necesita configurar la respuesta de su servidor para admitir
Encabezados de solicitud de control de acceso para al menos "tipo de contenido"
-
1. Necesito configurar mi solicitud para excluir de alguna manera el
Verificación de encabezado "tipo de contenido" durante la OPT previa al vuelo.

¿Hay alguna sugerencia para lograr la opción 2? Problemas comunes 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
sugiere "no personalizar el tipo de contenido" de su solicitud. Sin embargo, yo
no tengo opciones de encabezado en mi solicitud, ni encabezados predeterminados
configurado a axios, por lo que solo puedo asumir que esto está implícito en el final de axios?

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/axios/axios/issues/853?email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXHG43VWWK3TUL52HS4DFVREXH63JWMVBW5 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
.

¿Alguna noticia sobre esto? Estoy prácticamente en el mismo barco.

@imranimu El problema es una combinación del navegador que estás usando y el servidor al que estás haciendo la solicitud. No hay nada que axios pueda hacer al respecto, a menos que el navegador exponga una API que le permita ignorar la verificación de CORS.

Tienes pocas opciones:

Si controla el servidor que está solicitando, permita que responda a todas las solicitudes OPTIONS con los siguientes encabezados:

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

Con express, esto podría verse así, colocado antes de otras rutas en su cadena 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);
});

También debe agregar un encabezado Access-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>> a la respuesta.

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

En pocas palabras, el navegador sabe cuándo está solicitando un recurso en un origen diferente (dominio), por lo que envía una verificación previa al vuelo (utilizando el tipo de método de solicitud OPTIONS, no GET, POST, etc.), para ver si el servidor dice que está bien. para recibir la solicitud. Es una medida de seguridad básica del navegador para reducir la posibilidad de que un sitio web de terceros utilice su API, lo que es posible que no desee. El código anterior básicamente solo dice que está bien que un sitio web específico consuma la API. Si todos los sitios web pueden consumirlo, establecería Access-Control-Origin: * .

Alternativamente, si no controla el servidor al que está realizando la solicitud, entonces exponga una ruta en el servidor que está sirviendo la página, lo que hace (proxy) la solicitud por usted. Esto funciona porque la ruta expuesta tiene el mismo origen (dominio) que su aplicación, por lo que la política CORS no se aplica y el servidor al que expuso la ruta no es un navegador, por lo que no recibirá un error CORS.

@ Aitchy13, el servidor API al que me estoy conectando tiene Access-Control-Origin: * , la consola me da este error como en este 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 ‘*’).

También dices, para agregar ...

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

... pero ¿no es Access-Control-Allow-Origin solo para respuestas, no solicitudes?

No se admite si Access-Control-Allow-Origin : * ... muy extraño.

Estos son algunos de los encabezados de respuesta de la API para algunas referencias que ayuden a ayudar a futuras posibles soluciones:

(Esto está fuera de una solicitud de método OPTIONS antes de la solicitud real que se rechaza debido a CORS)
ENCABEZADOS DE RESPUESTA

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

¿O tengo algo mal? Estuve a punto de romper mi computadora portátil a la mitad por este problema.

Tuve el mismo problema, después de varios intentos, probando algunas soluciones, ninguna funcionó. solo después de configurar el proxy en package.json.
agrega:
"proxy": "dirección api"
que pasará por alto los cors.

@IkarosFeitosa ¿Puedes publicar tu configuración de proxy de configuración?

@zacharytyhacz no puede enviar las credenciales del navegador cuando el servidor responde con Access-Control-Allow-Origin: * .

Cualquiera:

1. cambie * para que sea una dirección de sitio web específica.
2. establezca ...withCredentials: false en el parámetro config / options de la función de solicitud axios que está utilizando.
3. establezca la propiedad de proxy en el parámetro config / options de la función de solicitud de axios que está utilizando, en un proxy válido (ejemplo a continuación)

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

¿Cualquier progreso? Configuré mi servidor web para establecer el encabezado resposne, pero parece que no funciona.

Estoy confuso este consejo de error:

CORS debería ser el límite del navegador web, necesita permitir el retorno del servidor, ya permito este cors, pero luego el navegador me dijo No 'Access-Control-Allow-Origin' header is present on the requested resource .

Intento la configuración de mi servidor cors con fetch api, funciona bien.

Si usa nodejs con express . Esa publicación podría ayudarte.

Si desea que solo se permita alguna ruta con cors, por ejemplo:
/home/fridge - no permitido de otros orígenes
/home/toilet - debería permitirse desde otros orígenes

Puedes probar la siguiente implementación (funcionó para mí)

En rutas / 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);
});

Si no usa nodejs con express , intente buscar en Google la solicitud de método OPTIONS

Probado desde express: 4.16.3

No, :) Son problemas a la hora de desarrollar (usamos http)
cuando lanzamos en el servidor (usamos https)
No sucedió.
Así que simplemente instale el complemento: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

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

¡¡Eso ha resuelto mi vida !!

Gracias por la sugerencia. He actualizado mi código para enrutar la solicitud a través de un 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);
});

Sin embargo, sigo recibiendo este error:

Solicitud de origen cruzado bloqueada: la política de mismo origen no permite leer el recurso remoto en https://a.4cdn.org/a/threads.json. (Razón: el encabezado CORS 'Access-Control-Allow-Origin' no coincide con ' https://boards.4chan.org ').

He buscado en varios foros y preguntas sobre Stack Overflow y parece que no puedo encontrar ninguna solución a esto. Se agradecería que alguien nos diera alguna información.

Hola chicos, prueben esto antes de la llamada de axios, me funcionó

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

esta fue mi solución

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

Crearé un video sobre cómo solucionar este problema de CORS. Actualizaré este comentario con un enlace a mi video de YouTube.

Editar:
https://youtu.be/hxyp_LkKDdk

es 2021 ahora, ¿hay alguna actualización? 😃

Sí, estoy tan metido en mi mierda que realmente tuve que revisar esa mierda de año 😆

Simplemente use fetch para probar si el cors del servidor funciona primero.

Y...

axios puede solicitar mi koa-server , pero no iris directamente, ambos brazos populares cors-middleware.

1358

¿Por qué no existe una solución oficial a este problema? Leí todo este hilo y me desconcierta lo que parece ser un problema universal que nadie realmente está resolviendo de una manera estándar.

¿Por qué no existe una solución oficial a este problema? Leí todo este hilo y me desconcierta lo que parece ser un problema universal que nadie realmente está resolviendo de una manera estándar.

Todo el problema de CORS no es Axios, ni siquiera JavaScript. Es una función de seguridad integrada en la mayoría o en todos los navegadores. Hay formas de "piratear", pero depende del servidor responder con los encabezados correctos.

¿Por qué no existe una solución oficial a este problema? Leí todo este hilo y me desconcierta lo que parece ser un problema universal que nadie realmente está resolviendo de una manera estándar.

Todo el problema de CORS no es Axios, ni siquiera JavaScript. Es una función de seguridad integrada en la mayoría o en todos los navegadores. Hay formas de "piratear", pero depende del servidor responder con los encabezados correctos.

Entonces, dada esa respuesta, ¿cuál es la forma más "exitosa" de implementar una solución para un problema de CORS?

Ok, después de dos días de investigación finalmente lo entiendo.

Hablando estrictamente, este no es un problema de axios. En realidad, esto ni siquiera debe considerarse un problema. axios fue diseñado para funcionar siguiendo todos esos estándares CORS extraños y molestos, por lo que el mensaje: CORS header ‘Access-Control-Allow-Origin’ missing se espera que suceda, ese es el funcionamiento correcto de axios. En el ejemplo con la api de 4chan, como se dijo antes, el problema no es axios, es la propia api de 4chan que no sigue los estándares CORS.

Algunas personas han sugerido el viejo truco de usar un proxy para evitar todas las validaciones de encabezados. Aquí hay un blog de Negar Jamalifard que explica cómo hacer el truco: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 Por cierto , No estoy seguro de si esto puede considerarse una mala práctica.

En mi caso, estuve dos días tratando de conectarme a una asp net core api en mi propio localhost hasta que me di cuenta de que axios, antes de enviar mi solicitud de obtención, automáticamente estaba enviando una "solicitud de verificación previa" que está enviando como un método de OPCIONES que mi servidor era no preparado para manejar. Si hay alguien a quien culpar es a Chrome y Firefox por mostrar un mensaje tan ambiguo.

Algunas personas han sugerido el viejo truco de usar un proxy para evitar todas las validaciones de encabezados. Aquí hay un blog de Negar Jamalifard que explica cómo hacer el truco: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 Por cierto , No estoy seguro de si esto puede considerarse una mala práctica.

Entonces, ¿el uso de proxy es el mejor caso posible para estas llamadas? Es una pena.

Entonces, ¿el uso de proxy es el mejor caso posible para estas llamadas? Es una pena.

Bueno ... también puedes intentar hablar con el tipo que crea la API que estás tratando de consumir y pedirle que la arregle.

He resuelto el problema:
para axios: url = " http: // localhost : 8080" method = 'post'
para mi respuesta del servidor Django:
uesrItem = {'usuario': 'xxx'}
respuesta = JsonResponse (userItem)
respuesta ["Access-Control-Allow-Origin"] = " http: // localhost : 8080"
respuesta ["Access-Control-Allow-Credentials"] = 'true'
respuesta ["Access-Control-Allow-Methods"] = "POST, OPCIONES"

El problema no es axios, ¡sino la API que está solicitando!

Por ejemplo, me codificaron una API en Flask y el método GET fue:

@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)

Pero el problema se resolvió cuando agregué un encabezado en la respuesta de la 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

Luego registro mi respuesta axios y la obtengo:

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

No sé qué API están usando todos, ¡pero en Flask se resolvió!

En mi caso, no había nada de malo en axios. Le pregunté al tipo que creó la API que habilitara CORS en el lado del servidor.

prueba esto

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

He utilizado la solución https://github.com/Rob--W/cors-anywhere y funciona bien, pero en prod le pediré al tipo que hizo la API que habilite cors para mi dominio

No creo que pueda resolver CORS directamente en axios, porque CORS es una restricción del navegador que se encuentra entre su navegador y los servidores de destino.

Tu también puedes:

1. Incluya Access-Control-Allow-Origin en los encabezados de respuesta de su servidor de destino .
2. No incluya el nombre de host en su solicitud de axios, por lo que solicitará su servidor original . Luego, desde su servidor original, puede hacer lo que quiera con el servidor de destino.

Mencione un fragmento de código de ejemplo detallado.
Será de gran ayuda.

Estaba teniendo el mismo problema en mi local.
Agregué cors en mi backend y resolví. :)

Este no es el problema con axios Este es el problema con el backend. Estoy usando Django. Y agregar estos dos resolverá el problema.

Agregar ropa intermedia CORS

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

Y permitiendo el CORS.
(Permitiendo CORS para todos)

CORS_ORIGIN_ALLOW_ALL = True

(Esto es un poco inseguro ya que permite todos los orígenes. Lo que lo hará vulnerable a los ataques CSRF)
Por lo tanto, para la producción solo se permiten orígenes específicos.

CORS_ORIGIN_ALLOW_ALL = False

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

Ejemplo: +1:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

Hola a todos,
Como se ha mencionado, este problema es una protección del navegador contra solicitudes de origen cruzado. Lo resolví siguiendo estas instrucciones: https://support.google.com/chrome/thread/11089651?hl=es

Para aquellos que todavía luchan:
Es de esperar que a estas alturas ya comprenda que esto no es un problema con Axios y que el navegador está bloqueando CORS debido a que el servidor no ha configurado un encabezado. Si comprende esto y todavía tiene problemas con su propio servidor que no configura los encabezados, asegúrese de configurarlo en su servidor web real cuando use un proxy inverso. Por ejemplo, muchas aplicaciones Node / Express son servidas por NGINX en producción con un proxy inverso. Consulte enable-cors.org para

Para aquellos que todavía luchan:
Es de esperar que a estas alturas ya comprenda que esto no es un problema con Axios y que el navegador está bloqueando CORS debido a que el servidor no ha configurado un encabezado. Si comprende esto y todavía tiene problemas con su propio servidor que no configura los encabezados, asegúrese de configurarlo en su servidor web real cuando use un proxy inverso. Por ejemplo, muchas aplicaciones Node / Express son servidas por NGINX en producción con un proxy inverso. Consulte enable-cors.org para

He estado luchando durante 3 horas, nada ha cambiado en el lado del cliente, finalmente agregué lo siguiente en el servidor:

instalar egg-cors (solo para el proyecto egg)

// ./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
  };

eso es todo

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

Simplemente use fetch para probar si el cors del servidor funciona primero.

Y...

axios puede solicitar mi koa-server , pero no iris directamente, ambos brazos populares cors-middleware.

1358

Esto funcionó para mí y necesito saber por qué

Estaba trabajando con Tornado y Vuejs, axios no era el problema, en mi backend añadí:

# 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'
        )

@robertjcristiano
Esta funcionado
Verrrrrrrrrrry Gracias

Tengo el mismo problema
Mi código
axios ({
método: "obtener",
url: "http: // localhost: 4000 / users",
})
.entonces (respuesta => {
console.log (respuesta);
})
.catch (Error => {
console.log (error)
});
}
Obteniendo este error
El acceso a XMLHttpRequest en ' http: // localhost : 4000 / users' desde el origen ' http: // localhost : 3000' ha sido bloqueado por la política CORS: La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: No 'Control de acceso El encabezado -Allow-Origin 'está presente en el recurso solicitado.

¿Alguien podría darme una solución paso a paso a lo que debo hacer?

@albertpinto En primer lugar, debe comprender que axios no es el problema, el "backend" que está utilizando debe poder recibir datos externos. entonces en google puedes buscar. algo como _enable cors on (ponga el lenguaje o marco que está usando) _

@albertpinto mira todas las posibles soluciones en este mega hilo. No es un problema del lado del cliente / front-end de su parte; de ​​hecho, es el servidor (localhost: 4000). El servidor debe responder con encabezados CORS para permitir el origen.

Por ejemplo, su servidor debería responder con encabezados como:

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

Resolví esto de la siguiente manera:

1. Instale cors npm: npm install cors (en su servidor de nodo de descanso en mi caso http: // localhost: 4000)

Esto también se aplica a su punto final:
var cors = require ('cors')
var express = require ('express')
var cors = require ('cors')
var app = express ()
app.use (cors ())

¡Gracias por todas las sugerencias!

// Para CORS, si usa express js, simplemente puede usar el paquete cors a través de npm.

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

cURL no hace cumplir las reglas de CORS. Los navegadores hacen cumplir esas reglas por motivos de seguridad.

Cuando mencionas que agregaste el encabezado relevante, supongo que te refieres a que agregaste esos encabezados a la solicitud. En realidad, se espera el encabezado en los encabezados de respuesta del servidor, lo que indica que otros sitios web pueden acceder al recurso directamente.

FYI, CORS - Intercambio de recursos de origen cruzado. Dado que su API no lo admite, tiene dos opciones:

1. Utilice un servidor proxy en el mismo dominio que su página web para acceder a la API de 4chan o,
2. Utilice un servidor proxy en cualquier otro dominio, pero modifique la respuesta para incluir los encabezados necesarios.

Me gustaría votar para cerrar este problema como "No es un problema".

@sunnykgupta
la misma lógica, el mismo cuerpo, pero la solicitud de publicación de http angular al punto final de backend remoto no recibe un error de bloque CORS

Si tiene un servidor Go en ejecución, le sugiero que use 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))

Resolví esto de la siguiente manera:

1.Cree un archivo vue.config.js en la raíz del proyecto justo al lado de package.json, que contenga:

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

2.Haga una solicitud 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', {
encabezados: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
proxy: {
anfitrión: '104.236.174.88',
puerto: 3128
}
}). entonces (función (respuesta) {
console.log ('la respuesta es:' + response.data);
}). catch (función (error) {
if (error.response) {
console.log (error.response.headers);
}
else if (error.request) {
console.log (error.request);
}
demás {
console.log (error.message);
}
console.log (error.config);
});

Hola, todos,
Solo estoy publicando esto, ya que me tomó horas resolverlo.

En primer lugar, CORS es definitivamente un problema del lado del servidor y no del lado del cliente, pero estaba más que seguro de que el código del servidor era correcto en mi caso, ya que otras aplicaciones funcionaban usando el mismo servidor en diferentes dominios. El problema comenzó cuando comencé a usar axios con mi instancia personalizada.

En mi caso, fue un problema muy específico cuando usamos una instancia baseURL en axios y luego intentamos hacer llamadas GET o POST desde cualquier lugar, axios agrega una barra / entre baseURL y la URL de solicitud. Esto también tiene sentido, pero era el problema oculto. Mi servidor Laravel estaba redirigiendo para eliminar la barra diagonal que estaba causando este problema.

En general, a la solicitud OPTIONS previa al vuelo no le gustan los redireccionamientos. Entonces, definitivamente verifique eso y evítelo.

Espero que esto pueda ayudar a alguien, aunque nada de esto es un error.