'Vue + Axios: Making a GET request to a third-party website throws CORS error

I'm trying to make a get request to a third-party website from my vue app. It's a public website, such as stackoverflow.com for example.

mounted() {
    axios.get('https://stackoverflow.com/')
},

I'm getting this:

Access to XMLHttpRequest at 'https://stackoverflow.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Same thing happens if I upload my project on a web server. It works fine if I make the request from an Express.js app.

Is there a workaround for this? I really don't understand why it would work from a server and not from a browser. I also tried uploading the project on a web server, still the same.

vue.jsaxios


Solution 1:[1]

Seems like its because you are requesting a HTTPS resource from localhost which is HTTP by default. Try requesting HTTP only?

Alternatively, add the Access-Control-Allow-Origin: '*' header to your request.

Also, I recommend also using the vue-axios library to configure your axios.

For example

import axios from "axios";
import VueAxios from "vue-axios";

Vue.use(VueAxios, axios);

Solution 2:[2]

first compelet your header request then convert your lifecycle to created

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Moein Mousavipour

Related Questions