No 'Access-Control-Allow-Origin' header when launch ajax in vue component under electron-vue dev envrironment

Question

Following https://github.com/SimulatedGREG/electron-vue, i run yarn run dev and make a minor change to see how it works. In electron vue application, i have launch an ajax request in vue component created hook function,

created: function () {
        let self = this
        this.$http.get('http://example.com/api/hwid/383').then(
                function (resp) {
                    self.title = resp.title
                }
        )
    }

In the vue-electron dev tool, there are following error in the console:

XMLHttpRequest cannot load http://example.com/api/hwid/383. No 'Access- Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9080' is therefore not allowed access.

How to solve that? Must i set the cross domain in the server side?

klimat · Accepted Answer · 2017-11-24 14:24:25Z

1

Yes, you should add Access-Control-Allow-Origin for localhost on the server side.

Since it's only a browser policy, you eventually can write your own (proxy) server which will get http://example.com/api/hwid/383 data. Then you will request data through your server without any issues.

edited Nov 24, 2017 at 14:24

answered Nov 24, 2017 at 12:22

klimat

25.1k7 gold badges66 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

kidsit Over a year ago

thanks. What do you mean "you eventually can write your own (proxy) server"? Do you mean the vue component ajax to my proxy server and my proxy server launch the real ajax data fetching to example.com and return it to the vue component? And the proxy server code is implemented in nodejs running in electron environment?

klimat Over a year ago

@kidsit Yep sth like this. When you have your own server (node, php, whatever) you can make any request you want. Then you call your server from vue app.

kidsit Over a year ago

currently, i have the example.com end point ready(writen in php). my question here is: i am building an electron desktop app, should i write a small proxy script running in electron which proxy the request to the example.com(no access-control-allow-origin limitation since node is on the server side) and forward the response to vue app? In this scenario, vue app which run in chromium will not have the access-control-allow limitation also? So, what i need to do is write that node proxy script? If so, is there any known small script ready for that function? Thanks

klimat Over a year ago

If you're controlling exmaple.com backend just add allow-origin to the response headers, anything else will be an overhead.

kidsit Over a year ago

i do not want to allow-origin to not known domain origin due to security concern. Any more idea on this specific requirement? thanks

|

Collectives™ on Stack Overflow

No 'Access-Control-Allow-Origin' header when launch ajax in vue component under electron-vue dev envrironment

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related