1

We've an Angular 2/4 web app running on AWS S3 buckets. We wanted to allow any * 3rd party website to access it's assets viz. .css, .js, .images etc.

Enable CORS in Angular 2/4

The 3rd party website is supposed to embed a code like this:

<script src="http://angular2-4-app.domain/widget.js"></script>

The widget.js file internally calls other assets viz. .css, .js, .images etc.

For example:

var n=document.createElement("script");
n.setAttribute("type","text/javascript");
n.setAttribute("src","folder1/asset1.js");
n.async="async";

The green line represent the requests in which the assets are served back to the 3rd party website which is not happening currently.

The red line represent the requests in which the assets are not served back to the 3rd party website which is happening currently because of CORS issues.

We wanted to achieve the green line requests.

The CORS seems to be enabled on them from the AWS console:

CORS allowed on AWS

We need a solution like CORS in node.js

What else is required to enable CORS in this case?

Zameer Ansari
  • 28,977
  • 24
  • 140
  • 219
  • 1
    Unless you are trying to access those resources with XHR/fetch/canvas, then you shouldn't need CORS at all. There are no cross-origin restrictions on using images in ``, JS in ` – Quentin Dec 05 '17 at 08:02
  • 1
    "The red line represent the requests in which the assets are not served back to the 3rd party website which is happening currently because of CORS issues." — How is the third party website trying to load the resources? What is the *exact* error message that is displayed in the console that leads you to think this has something to do with CORS? – Quentin Dec 05 '17 at 08:03

1 Answers1

2

The reason is this CORS Common Request Header:

<AllowedHeader>Authorization</AllowedHeader>

Common Request Headers

Basically the way you have your CORS policy written is that the only header supported is Authorization. Example:

Authorization: AWS AWSAccessKeyId:Signature

The solution is to change it to:

<AllowedHeader>*</AllowedHeader>

Cross-Origin Resource Sharing (CORS)

John Hanley
  • 74,467
  • 6
  • 95
  • 159
  • The solution is correct, but I think this is reversed: *"Basically the way you have your CORS policy written is that all requests require the Authorization header to be present."* I believe it actually requires that no *other* headers be present. *"The `AllowedHeader` element specifies which headers are allowed in a preflight request through the `Access-Control-Request-Headers` header. Each header name in the `Access-Control-Request-Headers` header must match a corresponding entry in the rule."* – Michael - sqlbot Dec 05 '17 at 22:02
  • 1
    @Michael-sqlbot. Thank you. I changed the wording in my answer. – John Hanley Dec 06 '17 at 03:48