Cannot see my articles in my Angular Strapi Blog

Questions and Answers
,
1
System Information
  • Strapi Version:
  • Operating System:
  • Database:
  • Node Version:
  • NPM Version:
  • Yarn Version:

Hello, I am trying to launch Strapi Blog in Angular, I followed the tutorial carefully to create the backend as well as the frontend. But, when I launch my Angular project, It just shows the title ‘Strapi Blog’ but the page does not show any blog. I also check the graphql console and it works fine as it shows the published article. My Web Console shows this error:
“Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource … Reason: CORS header
‘Access-Control-Allow-Origin’ missing”
Any advice to solve this will be helpfull!

2

The Same Origin Policy (SOP) is a security measure standardized among browsers. It is needed to prevent Cross-Site Request Forgery (CSRF). The “Origin” mostly refers to a “Domain”. Same Origin Policy prevents different origins (domains) from interacting with each other, to prevent attacks such as CSRF (Cross Site Request Forgery) through such requests, like AJAX. In other words, the browser would not allow any site to make a request to any other site. Without Same Origin Policy , any web page would be able to access the DOM of other pages.

This SOP (Same Origin Policy) exists because it is too easy to inject a link to a javascript file that is on a different domain. This is actually a security risk ; you really only want code that comes from the site you are on to execute and not just any code that is out there.

If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999

3

I have the same problem but a different issue. No articles are shown and my console gives the following errors:

:1337/graphql:1:        Failed to load resource: the server responded with a status of 400 (Bad Request)
core.js:6014 
        
       ERROR Error: Network error: Http failure response for http://localhost:1337/graphql: 400 Bad Request
    at new ApolloError (bundle.esm.js:63:1)
    at bundle.esm.js:1247:1
    at bundle.esm.js:1559:1
    at Set.forEach (<anonymous>)
    at bundle.esm.js:1557:1
    at Map.forEach (<anonymous>)
    at QueryManager.push../node_modules/apollo-client/bundle.esm.js.QueryManager.broadcastQueries (bundle.esm.js:1555:1)
    at bundle.esm.js:1161:1
    at ZoneDelegate.invoke (zone-evergreen.js:359:1)
    at Object.onInvoke (core.js:39699:1)

Any ideas? Something with Apollo and graphqp, but I have no idea…