Sign in
| Created |  Urls |
Favourites | Opened | Upvotes | Comments |
| 6. Sep 2019 | 2 | 0 | 370 | 0 | 0 |
Default browsers will not allow javascript to make requests to a domain different from where the javscript belongs - this is called SOP Same Origin Policy.
In the drawing there are 2 domains :
Understanding Javascript OriginSay you have the following index.html file loaded in your browser from the domain a.com :
<htm>
<head>
<script src="http://c.com/some-file.js"></script>
<script>
... embedded javascript ...
</script>
...
</head>
...
</html>
, you can see that the index.html contains 2 sections of javascript :
In both cases, reference or embedded, the origin of the javascript is the domain from which the html was loaded, a.com, - so even if the referenced javascript is loaded from c.com, it's origin is NOT c.com but instead the domain from which the html was loaded, a.com.
How the browser handles cross origin requestsThe generally used browsers (like Chrome, FireFox etc.) all implement a Same Origin Policy that does NOT allow javascript to make cross origin requests UNLESS the requested server deliberately allows it.
Before making a cross origin request typically the browser will send a pre-flight request to see if the server deliberately allows requests from that particular origin :
In the above example, the server (b.com) have deliberately told the browser that requests from any (*) origin including a.com should be allowed by sending Access-Control-Allow-Origin:* in the response header.
Alternatively the server, b.com, may respond with :
Note that new browsers also regard different ports to be different origins.
Different servers have different methods of setting the Access-Control-AllowOrigin header, here is how it is done in ASP.NET Core:
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("all", builder => // defining a CORS policy called "all"
{
builder.WithOrigins("*");
});
});
// ..
}
Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseCors("all"); // use the "all" policy
// ..
}
}
In ASP.NET Core a CORS service needs to be added to the DI Container (services) and the CORS service must be added at least one CORS policy.
A CORS policy is created using a CorsPolicyBuilder and is registered with a name, eg. above I have a policy called "all" that will allow all origins to request resources on this server.
Access-Control-Allow-Origin is the most important header entry to control CORS, however browsers supports 2 other CORS related headers, here is an example :
Using the CorsPolicyBuilder It is possible to fine tune how the ASP.NET Core server responds, the CorsPolicyBuilder have the following methods :
Eg. to create the server response above, we would have :
services.AddCors(options =>
{
options.AddPolicy("clients", builder => // say we have 2 clients a.com & bar.example
{
builder.WithOrigins("https://a.com", "http://bar.example")
.WithHeaders("x-my-custom-header")
.WithMethods("PUT");
});
});
In ASP.NET Core it is possible to control CORS behaviour on a specific HTTP endpoint by setting the CORS policy on Action methods using the EnableCors attribute : (it is also possible to set the EnableCors attribute on Controller level)
[HttpGet]
[EnableCors("PolicyName")]
public async Task<JsonResult> GetImage(string id) {
// ..
}