1

If I have project in vue-cli with no node.js (or express.js), can I somehow unblocke this CORS access? I tried to add a code in vue.config.js

vue.config.js:

       module.exports = {
        devServer: {
         proxy: {
         '/api': {
         target: 'http://18.700.121.3:8000/',
          ws: true,
         changeOrigin: true
       }
     }
   }
 }

vue template

 import axios from 'axios'
  export default {
   name: "Jokes",
  data () {
  return {
    songs: null,
  }
 },
 },
   mounted () {
    const config = {headers: {'Access-Control-Allow-Origin': '*'}};
    axios
    .get(`http://2.788.121.2:4000/`, config) //it a sample api
    .then(
        response => (
            this.songs= response.data))
   }

}
</script>

but it didn't help. Also I tried to swich-on chrome plugin Access-Control-Allow-Origin, where I add access to localhost:8080, but still doesnt work. So it is possible, that only option is install node.js and add res.header("Access-Control-Allow-Headers","*");

anna
  • 859
  • 2
  • 9
  • 23
  • add this to the devServer config? – Estradiaz Dec 10 '19 at 07:25
  • I add this part code to vue.config.js. But this res.header("Access-Control-Allow-Headers","*") I did't add, because I read it should be on backend side. – anna Dec 10 '19 at 07:27
  • DevServer is backend – Estradiaz Dec 10 '19 at 07:34
  • Ok, but I dont have node.js and express.js, so it os possible to do something to on the frontend side? Or only install express – anna Dec 10 '19 at 07:40
  • Wait - vue-cli without nodejs? Does this actually work? Basically any server is fine - eg nginx apache etc just point to the dist folder (index.html)) – Estradiaz Dec 10 '19 at 07:48
  • CORS should be added in the app which receives/process the request, not the one who sends the requests. Clarify which app process the requests and which app sends the request or if both are same app. – Mat J Dec 10 '19 at 07:54
  • ok I am a newbe in this backend things. I install a vue-cli and do all js scripts and scss layouts. I havn't bahd a problem with this CORS. I know vue is on node.js but i really dont't know where exactly I should add this `res.header("Access-Control-Allow-Headers","*")`. I have only main.js, babel.config.js and vue.config.js files. – anna Dec 10 '19 at 07:55
  • https://stackoverflow.com/questions/55607326/vue-devserver-proxy-is-not-helping-i-still-get-cors-error maybe this is your issue? – Estradiaz Dec 10 '19 at 08:02
  • I add some more code to my question where exactly I tried to get access to this api. – anna Dec 10 '19 at 08:03
  • `Access-Control-Allow-Origin` is a **response** header - don't put it in a **request** - CORS is up to the **server** ... i.e. `2.788.121.2` needs to respond with CORS headers if the request is not same origin - – Jaromanda X Dec 10 '19 at 09:11
  • The code you added to `vue.config.js` means that the dev server will proxy any unknown requests (requests that did not match a static file) that match `/api` to `18.700.121.3` ... is this your server? This one does NOT need to send CORS response headers. Anyway, the request to `2.788.121.2` is just made directly to that ip address and the proxy setting you made has no impact on it at all - so it will need to allow CORS access – Jaromanda X Dec 10 '19 at 09:15
  • I changed the ip, to not show it nobody.. I get it form other company to get the data from api and do some simple tasks.. and I can not do this, because of this access :/ I'm quite frustrated. – anna Dec 10 '19 at 09:26
  • 1
    so you cant change the api server response header - thus you can for developement e.g. proxy pass it to a local ip with something that doesnt care about cors and add cors header - there should be plenty of solutions on SO ... or use a browser that doesnt care about cors – Estradiaz Dec 10 '19 at 10:58
  • yeeee, I change to a firefox and switch on the plugin. Thanks for helps! – anna Dec 10 '19 at 13:02

3 Answers3

2

Try remove the header const config = {headers: {'Access-Control-Allow-Origin': '*'}}; from the request

The additional header will just confuse the browser

francox9
  • 175
  • 7
0

First way, Use Cors Plugin in chrome Eg- Moseif CORS or Degrade your chrome version less than 71.

Second way, If you can modify the server-side code (If using express)

Add below codes, You can easily solved this problem.

var cors = require('cors')

var app = express()
app.use(cors())
Hax0r
  • 1,722
  • 4
  • 25
  • 43
-3
  1. Close the Chrome.

  2. Hold down the Windows Key and Press R on your keyboard. The "RUN" dialog box will open.

  3. Insert the following input field chrome --disable-web-security --user-data-dir and run it

  4. Now run your vue.js app

Hope it helps.

aman raj
  • 193
  • 2
  • 5