Level 88
It could be that localhost is not allowed as a domain to do these requests. If you would use a valid domain name it should work correctly
2 likes
Oct 8, 2020
8
Level 5
Why CORS error with axios request to youtube/v3/video
Hello, In my @vue/cli 4.0.5 / axios": "^0.19 I got “No 'Access-Control-Allow-Origin' header is present on the requested resource.” when I run get request to youtube/v3/video API. I read this https://developers.google.com/youtube/v3/docs/videos docs and do :
let params = { // https://developers.google.com/youtube/v3/docs/search/list
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Methods' : 'GET, POST, PUT, DELETE, OPTIONS',
part: 'snippet',
key: this.youtubeApiKey,
id : this.videoId,
type: 'video'
}
axios.get('https://www.googleapis.com/youtube/v3/video', params)
.then(response => {
console.log(response)
})
.catch(error => {
console.error(error)
})
and got error in console:
%5Bobject%20Object%5D:1 Access to XMLHttpRequest at 'https://www.googleapis.com/youtube/v3/video' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
where localhost:8080 is my localhost which I got with command :
yarn run serve
In this vuejs project I use axios for reading data from external API with code like :
let apiUrl = process.env.VUE_APP_API_URL
settingCredentialsConfig.headers.Authorization = 'Bearer ' + this.getters.token
axios.get(apiUrl + '/personal/task_assigned_to_users', settingCredentialsConfig)
.then((response) => {
and settingCredentialsConfig is in config file:
export const settingCredentialsConfig = {
withCredentials:true,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials':true
}
}
Seems, I set the same parameters when I make request to youtube, but why error and how to fix it?
Thanks!
Level 5
and which decision can be here? I run the app in dev mode with command
yarn run serve
If there is a way with this command work on other host, not
http://localhost:8080 ?
When I upload my app on live apache/ubuntu/Digital Ocean server I run live version with command
yarn run build
Must my application work correctly without CORS errors on server? How how to make development/debugging in this case?
Also in options of my app on youtube there is an option “Domain verification” : https://prnt.sc/uvvbee Have I to fill it for my app?
Level 27
It sounds similar to this bug report https://stackoverflow.com/questions/62317441/access-control-allow-origin-missing-when-uploading-to-youtube-api
My understanding is that CORS is meant for HTML loading of resources from other domains. AJAX/Axios is not subjected to CORS.
Can show the full headers of the response from your axios call to https://www.googleapis.com/youtube/v3/video?
Level 5
What I see in the console of my app : https://prnt.sc/uvwkr3
Url of the vuejs page where I try to youtube resource
http://localhost:8080/video-details/cl0MoTVyyPQ/%5Bobject%20Object%5D
Can you propose some other decisions forvuejs app? Not Axios ?
Level 27
@petrogromovo show the full rendered HTML of the page giving this error
Level 5
What I see by "View page source" menu. Is it ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/images/favicon.ico">
<title id="app_title"></title>
<link href="/js/0.js" rel="prefetch"><link href="/js/1.js" rel="prefetch"><link href="/js/10.js" rel="prefetch"><link href="/js/11.js" rel="prefetch"><link href="/js/12.js" rel="prefetch"><link href="/js/13.js" rel="prefetch"><link href="/js/14.js" rel="prefetch"><link href="/js/15.js" rel="prefetch"><link href="/js/16.js" rel="prefetch"><link href="/js/17.js" rel="prefetch"><link href="/js/18.js" rel="prefetch"><link href="/js/19.js" rel="prefetch"><link href="/js/2.js" rel="prefetch"><link href="/js/20.js" rel="prefetch"><link href="/js/21.js" rel="prefetch"><link href="/js/22.js" rel="prefetch"><link href="/js/23.js" rel="prefetch"><link href="/js/24.js" rel="prefetch"><link href="/js/25.js" rel="prefetch"><link href="/js/26.js" rel="prefetch"><link href="/js/27.js" rel="prefetch"><link href="/js/28.js" rel="prefetch"><link href="/js/29.js" rel="prefetch"><link href="/js/3.js" rel="prefetch"><link href="/js/30.js" rel="prefetch"><link href="/js/31.js" rel="prefetch"><link href="/js/32.js" rel="prefetch"><link href="/js/33.js" rel="prefetch"><link href="/js/34.js" rel="prefetch"><link href="/js/35.js" rel="prefetch"><link href="/js/36.js" rel="prefetch"><link href="/js/37.js" rel="prefetch"><link href="/js/38.js" rel="prefetch"><link href="/js/39.js" rel="prefetch"><link href="/js/4.js" rel="prefetch"><link href="/js/40.js" rel="prefetch"><link href="/js/41.js" rel="prefetch"><link href="/js/42.js" rel="prefetch"><link href="/js/43.js" rel="prefetch"><link href="/js/44.js" rel="prefetch"><link href="/js/45.js" rel="prefetch"><link href="/js/46.js" rel="prefetch"><link href="/js/5.js" rel="prefetch"><link href="/js/6.js" rel="prefetch"><link href="/js/7.js" rel="prefetch"><link href="/js/8.js" rel="prefetch"><link href="/js/9.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but vtasks doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app" ></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
Level 27
Level 5
I think no
Please or to participate in this conversation.