-1

I'm attempting to host a static Angular site on AWS S3, but I'm running into a Cross-Origin Resource Sharing (CORS) policy problem. When I try to access the index.html file after executing 'ng build', I encounter this error:

Access to script at '.../dist/testapp/runtime-es2015.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.

From my understanding, Angular typically requires a server to run, and I'm struggling to find comprehensive documentation on how to handle this.

I need help in two areas:

  1. How can I address this CORS policy issue?
  2. How do I successfully host a static Angular site on AWS S3?

I've looked at similar questions and tried their solutions without any success. They are as follows:

DonCarleone
  • 544
  • 11
  • 20
  • 1
    Are you attempting to load index.html locally (i.e., using `file://...`), or from S3 (using something like `https://s3.amazonaws.com/...`)? – Anon Coward Apr 30 '23 at 20:25
  • Yes, I'm currently trying to load index.html locally using the file:// protocol. Do you think this could be causing the CORS error? If so, is there a way to fix it to access the Angular app on AWS S3? – DonCarleone May 01 '23 at 03:17
  • the error message is self-explanatory! You should be accessing your website through http, not file. And when you do - there is no CORS issues in the first place! you don't need to configure CORS for static website that you access from browser – Felix May 01 '23 at 03:30
  • That's what I'm interested in doing lol. How can I do that without actually serving it? – DonCarleone May 01 '23 at 03:50
  • You pretty much need to serve it. It's common to use a tool like [ng serve](https://angular.io/guide/deployment) or some other local server while developing. – Anon Coward May 01 '23 at 04:07
  • I am aware that this is how it is generally done, but according to Angular docs, it should be possible to view using the built index.html (for example if you want to host on gitpages https://angular.io/guide/deployment#simplest-deployment-possible ) – DonCarleone May 01 '23 at 04:11
  • Huh? Hosting on gitpages is serving the HTML using GitHub to act as a server. No mention of running in browser locally using the file:// protocol is made on that page, since _it does not work_. – Anon Coward May 01 '23 at 13:49
  • gitpages is for static pages https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages – DonCarleone May 01 '23 at 15:01
  • this should be possible without having to serve the app https://stackoverflow.com/questions/54143002/run-angular-7-project-locally-on-file-without-server – DonCarleone May 01 '23 at 15:01

1 Answers1

1

It would seem to me that you're mixing up a few key points.

  1. "Traditional" MPA sites generally need a server that generates markup on demand (that is, when a page is requested), as each page is its own entrypoint and needs the appropriate HTML markup.
  2. SPAs sites (such as those built with Angular) do not need a server that generates markup on demand, but rather can be served through a static file hosting service. For example, you can use S3, or a provider like Netlify. There is still a server serving the html/css/js/other files (specifically, some sort of static file server), because that's how HTTP(S) protocol works, but you don't need to worry about that, because that's managed by the provider (in this case, S3).
  3. Locally, it's possible to view an HTML file directly in the browser through the file protocol, but if that HTML file tries to import JS (such as to run an SPA), that's gonna fail, because the browser doesn't allow importing JS through the file protocol. The takeaway from this is that viewing the index.html for an SPA through the file protocol is not the same as viewing it when served from S3.

So it seems that you are trying to locally test how your site would behave on S3, but are using the file protocol. That's not gonna work. You need to serve the files through a server. You can try using something like https://www.npmjs.com/package/serve as your static file server.

FoolsWisdom
  • 821
  • 4
  • 6