Issue
- Laravel 5.6
- Vue 2.5.7
- Google Chrome
Hi, I am trying to understand this CORS issue, i'm still trying to find a way to consume this list: https://api.coinmarketcap.com/v2/listings/
, and I receive the following error:
(index):1 Failed to load https://api.coinmarketcap.com/v2/listings/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://tours.mine' is therefore not allowed access.
yet if I goto this address: https://jsonplaceholder.typicode.com/posts/
everything works fine.
After using this Moesif Chrome CORS extension, and thus disabling CORS for chrome, I received a new error:
Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.
received only on this address:https://api.coinmarketcap.com/v2/listings/
http://tours.mine
- is a local name I set in httpd/vhosts.conf.I've tried BarryVdh cors lib, I also created my own CORS middleware, nada.
Flow:
in web.php routes:
Route::get('/', function () {
return view('welcome');
});
in welcome.blade I pass the csrf in both meta:
<meta name="csrf-token" content="{{ csrf_token() }}">
and script:
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
My Vue instance:
<div class="container" id="app">
<coin-add-component></coin-add-component>
</div>
and in my component I have the following hook:
mounted(){
this.axios.get('https://api.coinmarketcap.com/v2/listings/')
.then(response => {
console.log(response.data);
})
.catch(e => {
this.errors.push(e)
})
}
Your help is appreciated,
Bud
Solution
The url you are trying to consume can't be used in crossdomain with javascript because it doesn't provide a response header of type "Access-Control-Allow-Origin". In this case, if you have no control on the API server you are forced to use other unconventional ways because all modern browsers will block any requests to that site if the domain doesn't match with yours.
You have 2 alternative to solve this problem:
- Use a proxy with your same domain of yours to redirect all calls to that server
- Make ajax calls to your server and then make your server communicate directly with the api server using for example curl
Answered By - Andrea Mauro
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.