0

Im new to vue.js and webpack. I currently have a very big trouble to archive the next step: communicate with real-world-apis in a dev env.

what i currently do is: npm run dev

my application calls an remote api to which i have no access. then i run into the Access-Control-Allow-Origin-Issue.

If i build my application and run it with xampp everything works fine.

What can i do, to simply develope my application instead to hassle with that security thing?

I have tried to create a proxy, so i have already looked at:

  • npm cors (node-cors-client and node-cors-server) - but how does that apply to my vue app?
  • socket.io - but it seems to be overkill
  • http-server - but i got the same issues here
  • nuxt - could work, but then i need to refactor my vue.js app to nuxt and i dont know if this works then

any suggestions? Thanks!

timo kranz
  • 153
  • 1
  • 2
  • 13
  • It sounds like the API is running on your own machine? On xampp? In that case you need to set the headers in your API code. All it takes in PHP is `header("Access-Control-Allow-Origin: *");` –  Jan 12 '18 at 15:49
  • Really not clear where your api is – charlietfl Jan 12 '18 at 15:50
  • No the API is remote and i dont have access to it – timo kranz Jan 12 '18 at 15:50
  • If it is a third party api you need to use a proxy on server you control to make server to server request to endpoint...unless remote api serves *jsonp* in which case you make a jsonp request – charlietfl Jan 12 '18 at 15:51
  • yes, but how exactly? – timo kranz Jan 12 '18 at 15:55
  • @timokranz Write a PHP api that makes a `curl` call and passes on the data. I still don't understand why you can access a 3rd party api from localhost:80 but not localhost:3000 –  Jan 12 '18 at 15:58
  • I tried that too, but then i get this issue as well, but i will give it a try one more time... – timo kranz Jan 12 '18 at 16:01

1 Answers1

0

Solved: I ended up with a PHP-API

  • The PHP-API runs with xampp under port 80
  • The Vue.js-App runs with npm dev server under port 8080

The CORS-Hassle must solved then in the PHP-Script with: https://stackoverflow.com/a/9866124/3918455

timo kranz
  • 153
  • 1
  • 2
  • 13
  • I'm still curious though: which API is it? And why does it work if you deploy the Vue app, even though your own server is definitely not the same origin? –  Jan 13 '18 at 15:20
  • i run the builded version with xampp under port 80 and then i have access like via browser. i dont care about the details why this not work under port 8080 when i start npm dev server - or is this not the reason? the api itself is a remote application of my company. no way to change anything on this side... so i need to solve it on my own.... and its simply crap to develope with this fake proxy php shit.... so any other suggestions are still welcome – timo kranz Jan 13 '18 at 23:24
  • I'm still puzzled by this, because you said the deployed version works. Afaik, the `Origin` is the hostname plus port. One possible explanation is that the API only accepts requests from something like `123.10.*:80`. That would explain why `yourmachine:80` is fine as origin, while `yourmachine:8080` is not. –  Jan 14 '18 at 17:25