Vue.$http Cros Problem

yns.wtf · Oct 5th 2018

Hello Guys,

SAB , SPQRInc

I want to send data to remote server with Vue js. But it's a cros error.

JavaScript: Vue

clientAccessToken:function(){
this.$http.get('https://mobilwebsite.com.tr/apioauth2/client/authorize' , {
secret_id:this.api.secret_id,
secret_key:this.api.secret_key
} , {credentials: true}).then( res => {
console.log(res);
} )
}

Display More

PHP: Remote Server

/**
* @Route("/authorize" , name="client/authorize" , methods="GET" , requirements={"authorize" = "\d+"})
* @Request({"secret_id":"string" , "secret_key":"string"})
*/
public function authorizeAction( string $secret_id = null , string $secret_key = null ){
$response = new Response();
$response->headers->set('Content-Type', 'application/json');
$response->send();
return ['status' => 200];

Display More

I don't understand this error, I've tried too much but nothing ever worked. Do you have any idea?

SAB · Oct 5th 2018

You cannot do a crossbrowser with an xmlHttpRequest as it has a same domain policy. A workaround or trick for that is jsonp. vue-resource already has an implementation for this type of request, just use this.$http.jsonp().

https://github.com/pagekit/vue…blob/develop/docs/http.md

For explanation what jsonp does, take a look here:

https://stackoverflow.com/ques…2/what-is-jsonp-all-about

yns.wtf · Oct 5th 2018

Can you give me examples of how it works. Because I'm not understand it

SAB · Oct 5th 2018

Code

clientAccessToken:function(){
this.$http.jsonp('https://mobilwebsite.com.tr/apioauth2/client/authorize' , {
secret_id:this.api.secret_id,
secret_key:this.api.secret_key
} , {credentials: true}).then( res => {
console.log(res);
} )
}

That should be the only thing to change

yns.wtf · Oct 5th 2018

Not worked

yns.wtf · Oct 5th 2018

It worked when I change file to htaccess but why It not worked when I set to the Response class

Code

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials true
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>

Fosphatic Duke · Oct 5th 2018

if it's forbiden in .htaccess it won't work yunus this is for more security, adopted by almost all browsers. Cross Site Scripting isn't cool at all, especially if you have an atack from hacker and it is allowed...

yns.wtf · Oct 5th 2018

Yes, You saying correct. I could find safe methods at this weekend

SAB · Oct 5th 2018

application/json is CORB protected. You have to return either text/javascript or application/javascript

https://chromium.googlesource.…ead_blocking_explainer.md

Does something like this work?

Code

$response = App::response()->json($data);
$reponse->setCallback($callback); // $callback from @Request
return $response;

SAB · Oct 5th 2018

For CORS consider this:

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

You can allow only defined origins like:

Access-Control-Allow-Origin: http://foo.example

Vue.$http Cros Problem

Jump to the most helpful post

Share