My site
Hello,
New to Netlify and I am having trouble with my site on deployment. It is a Vue SPA scaffolded with vue-cli 3. The trouble is this. On one of the pages I do a fetch to the API at https://newsapi.org/ and I am getting an error message:
" Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [https://newsapi.org/v2 etc… (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."
I googled and found and tried this solution to no avail. I can see from dev tools that the newsapi.org server is not returning the correct headers. When I was in development mode using the vue-cli dev server I never ran into this problem?? Here are the pertinent Headers for my local server and when deployed to Netlify:
Local Server (Page loads ok)-
{“Response Headers (797 B)”:
{“headers”:[
{“name”:“access-control-allow-headers”,“value”:“x-api-key, authorization”},
{“name”:“access-control-allow-methods”,“value”:“GET”},
{“name”:“access-control-allow-origin”,“value”:“*”},
etc
{"Request Headers (622 B)":{"name":"Host","value":"newsapi.org"},{"name":"Origin","value":"http://localhost:8080"},{"name":"Pragma","value":"no-cache"},{"name":"Referer","value":"http://localhost:8080/headlines"},
Netlify Deploy:
{“Response Headers (674 B)”:
{“headers”:[{“name”:“cache-control”,“value”:“no-cache”},
{"Request Header":
etc
Host: newsapi.org
Origin: https://coronavirussite.netlify.app
Referer: https://coronavirussite.netlify.app/headlines
The fetch is:
const url = https://newsapi.org/v2/everything?q=${queryString}&from=${lastWeek}&pageSize=${this.pageSize}&domains=${domains}&excludeDomains=${excludeDomains}&language=en&sortBy=publishedAt&apiKey=${news_api_key};
// Just a little different way of implementing fetch()
const req = new Request(url);
fetch(req)
.then(response => {
etc
})
netlify.toml:
[[redirects]]
from = “/*”
to = “/index.html”
status = 200
[[headers]]
# Define which paths this specific [[headers]] block will cover.
for = "/*"
[headers.values]
Access-Control-Allow-Origin = "*"
Notice the newsapi.org server didn’t respond with a "name":"access-control-allow-origin","value":"*" Header when page was served from netlify !
I’ve done reading on CORS to no avail. I don’t believe I should have to implement a proxy if the the dev server can serve page fine. I hope someone here can help with this one. Thanx in advance.