CORS and VueJS.

@socieboy I think you add the wrong header parameters. It should be Access-Control-Allow-Origin

Vue.http.headers.common['Access-Control-Allow-Origin'] = 'http://xxx.xxx.xxx.xxx:94'
``

It didn't work my friend @ratiw ... I'm still getting the same error!

@socieboy You may need to add another header as well

Vue.http.headers.common['Access-Control-Allow-Origin'] = 'http://xxx.xxx.xxx.xxx:94'
Vue.http.headers.common['Access-Control-Request-Method'] = '*'

I will try @ratiw

No yet @ratiw

@socieboy Are you sure the error is still exactly the same?

yes @ratiw , i don't know whats wrong! :(

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Have you seen this?

https://github.com/vuejs/vue-resource/issues/208

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is your server, setting the CORS headers ???

It's not my own server, I try to access to IP video camera. @d3xt3r They have a API to connect to the camera. I can do that with Guzzle in Laravel, but when I try with Vue I got the error.

Its time to read more about CORS, its not something that you can control from your server.

The browser controls this feature. Yes, you might be able to use guzzle to access their api, but if they are not setting the headers appropriately, it might not be possible for you to access it from within you browser page.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

A simple extract

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.

@d3xt3r I really appreciate the time you take to response my friend, so you think it's not possible to have access from the browser directly to the API?

No, not unless they allow for cross origin request.

How do I know if the allow for cross origin request? The response headers doesn't have this header.

Access-Control-Allow-Origin

@d3xt3r

Then they don't allow for cross-origin request, tough luck.

Edit: Which service is this BTW ?

Mobotix cameras S15:

http://developer.mobotix.com/paks/help_cgi-image.html

What I can do right now It's sent a request to my server and then in the server call the API and it send me the current image of the camera, then i respond with the base64() of the image to Vue and displayed on the site, but it has a delay. the API provide a faststream method, wish keep me update with the most recent image as a video, but if I use this method with guzzle the request is always "pending" because never ends. Do you think there is some way that I can flush the buffer of the request to show on the browser? @d3xt3r

I am sorry won't be able to help further. No knowledge on this.

Thank you anyway! @d3xt3r

I was wonderen what url do you request for? Is it the ip adress of your camera?

Can you tell me the Url?

Can you maybe show me some code from vue?

And is it also possible that your using something else from the api? Just grab the image for in example and then get every second a new image?

@michaelvolst

this.$http.headers.common['Access-Control-Allow-Origin'] = 'http://' + camera.ip + ':' + camera.port
this.$http.headers.common['Authorization'] = 'Basic ' + btoa(camera.username + ':' + camera.password);

this.$http.get('http://'+ camera.ip + ':' + camera.port +'/cgi-bin/image.jpg')
    .then(function (response) {
}, function(response) {
        console.log(response)
    })

Im using vue resource and doing a simple ajax request.

I know the authorization is passing, but seems like the preflight request doesn't attach the headers; So tired of this method i was looking around and I found I could use JSONP so I tried and seems like the camera servers is responding but now im getting other error.

refused to execute script from because its mime type ('image/jpeg') is not executable.

Any idea?

You said you can make it work with Laravel/Guzzle, you could try to proxy your request in order to send an authenticated request through guzzle. You create a /proxy route in laravel and attach the header with the auth. Here is a package you could use to help you: https://github.com/fideloper/TrustedProxy

Maybe you could also set your auth token in the request you send from vue.js . From what I see it seems you do not attach any auth to your get request.

I do not know the auth protocol you need to use for the API you query but here is an example with oauth: https://auth0.com/blog/2015/11/13/build-an-app-with-vuejs/

I have found this video on YouTube https://youtu.be/wFwRnZESNi0

Maybe you can use it for your own camera

Have you tried

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

That worked for me a little while back.

@SamuelPB thank you for the advice I will try to do the proxy thing! and yes I add the authenticate token in the global vue header @lstables
I have this code too!

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

@socieboy yes but I meant the the Authorization header to authenticate you against the API. You typically would do something like:

$client = new GuzzleHttp\Client(['defaults' => ['headers' => ['Authorization' => 'Bearer'.' '.$token]]]);

It seems I did not see this your js. Maybe the API rejects your calls as you are not authenticated?

@socieboy right sorry I have not seen the basic auth method.

Yeah I think this part do the authenticate with the API.

this.$http.headers.common['Authorization'] = 'Basic ' + btoa(camera.username + ':' + camera.password);

@SamuelPB