Error CORS incluso después de configurar Access-Control-Allow-Origin u otros encabezados Access-Control-Allow-* en el lado del cliente

Tengo una aplicación Vue generada con webpack-simpleopción. Estoy tratando de hacer una GETsolicitud https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=enpero me sale el error:

XMLHttpRequest no se puede cargar
https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en. La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: no hay un encabezado 'Access-Control-Allow-Origin' en el recurso solicitado. Origin ' http://127.0.0.1:8080' por lo tanto, no se permite el acceso.

Estoy usando vue-resource y he agregado:

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

Eso no tiene ningún efecto.

También agregué esto en la devServeropción en webpack.config.js:

devServer: {
 historyApiFallback: true,
 noInfo: true,
 headers: {
 "Access-Control-Allow-Origin": "*"
 }
}

Eso tampoco está resolviendo el problema; el mensaje de error sigue siendo el mismo.

¿Cómo hacer para resolver esto?

Solución del problema

Access-Control-Allow-Origines un encabezado de respuesta que el servidor al que va la solicitud debe enviar.

Y todos los demás Access-Control-Allow-*encabezados son encabezados de respuesta para que los envíen los servidores.

Si no controla el servidor al que se envía su solicitud, y el problema con la respuesta es simplemente la falta del Access-Control-Allow-Originencabezado u otros Access-Control-Allow-*encabezados, aún puede hacer que las cosas funcionen, al realizar la solicitud a través de un proxy CORS.

Puede ejecutar fácilmente su propio proxy usando el código de https://github.com/Rob--W/cors-anywhere/.
También puede implementar fácilmente su propio proxy en Heroku en solo 2 o 3 minutos, con 5 comandos:

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

Después de ejecutar esos comandos, terminará con su propio servidor CORS Anywhere ejecutándose en, por ejemplo, https://cryptic-headland-94862.herokuapp.com/.

Ahora, prefije su URL de solicitud con la URL de su proxy:

https://cryptic-headland-94862.herokuapp.com/https://example.com

Agregar la URL del proxy como prefijo hace que la solicitud se realice a través de su proxy, lo que:

Reenvía la solicitud a https://example.com.

Recibe la respuesta de https://example.com.

Agrega el Access-Control-Allow-Originencabezado a la respuesta.

Pasa esa respuesta, con ese encabezado agregado, de vuelta al código frontend solicitante.

Luego, el navegador permite que el código de interfaz acceda a la respuesta, porque esa respuesta con el Access-Control-Allow-Originencabezado de respuesta es lo que ve el navegador.

Esto funciona incluso si la solicitud activa a los navegadores para que realicen una solicitud de verificación previa de CORS OPTIONS, porque en ese caso, el proxy también devuelve los Access-Control-Allow-Headersencabezados Access-Control-Allow-Methodsnecesarios para que la verificación previa sea exitosa.

Y si tiene un código de interfaz que agrega el Access-Control-Allow-Originencabezado u otros Access-Control-Allow-*encabezados a la solicitud, elimine ese código, porque el único efecto que tiene al agregar esos encabezados de solicitud es que está activando su navegador para enviar una solicitud de verificación previa de CORSOPTIONS en lugar de la real. GETo POSTsolicitar en su código.