No 'Access-Control-Allow-Origin' header is present on the requested resource - azure

Getting this error:
Access to fetch at 'https://myurl.azurewebsites.net/Player/1' from origin 'http://localhost:19006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I'm not the first with this error, but I feel like I have tried everything that one can find through searching for the problem. I'm developing a web API with ASP.net core, that's supposed to communicate with my react-native frontend. Problem is, I cannot for the life of me get the connection to work.
In program.cs I have added
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
builder.Services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
policy =>
{
policy.AllowAnyMethod();
policy.AllowAnyHeader();
policy.AllowAnyOrigin();
});
});
and
app.UseCors(MyAllowSpecificOrigins);
I have tried adding no cors to the method itself
[DisableCors]
[HttpGet("{id}")]
public List<Player> GetPlayers(int id)
{
return (from c in _context.Player.Take(1)
where c.PlayerId == id
select c).ToList();
}
I even deployed the server and database on Azure (I was supposed to sooner or later anyway) just hoping that would allow me to get it to work. The API runs fine if I visit the URL and run it through that one. It also works great if I host it locally and go through the web.
On Azure I've changed my cors settings to allow everything:
I can even access the API through expo web if I run it locally at the same time. But I need to be able to do it through my phone as well, or at least an android emulator. Neither of those works for neither a locally hosted server, or one that's on Azure.
How can I solve this?

Actually, shortly after setting my Azure cors settings, it did indeed start to work. Finally, I can at least demo it. Unfortunately, I still have no solution that solves it when hosting locally.

Related

Cors no-access-control-allow-origin when trying to call B2C login

I cannot resolve this error, i have a .net core web api, with a react application inside of it ( net core react template )
I have also added cors:
services.AddCors(options =>
{
options.AddPolicy("AllowMyOrigin",
builder => builder.WithOrigins("https://localhost:44300")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials()
);
});
I have tried multiple things but i cant get past this error.
I have found loads of material online to try and nothing seems to work i feel like i am missing something really obvious?
Can someone point me in the right direction.
I expect that there should be an allow origin header:
I also tried using the Mosif browser extension to turn cors on, this stoped the cors error from showing but now i have a 404 (notfound ) on:
https://login.microsoftonline.com/tfp/domainname.onmicrosoft.com/b2c_1_sign_up/v2.0/.well-known/openid-configuration
You mention that you get an 404 error when opening the openid-configuration url. This means that part of your configuration is incorrect. You must be able to open this url in your browser and get back a JSON document. Copy it to a new tab and tweak it until you get back a result.
Please double check your configured policy and tenant name. The full url usually looks like this:
https://tenantname.b2clogin.com/tenantname.onmicrosoft.com/<policy-name>/v2.0/.well-known/openid-configuration
https://tenantname.b2clogin.com/tenantname.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=<policy-name>
https://login.microsoftonline.com/tfp/tenantname.onmicrosoft.com/<policy-name>/v2.0/.well-known/openid-configuration
All of these are equally valid and can be used depending on your scenario.
The config should then look something like this:
authentication.initialize({
instance: 'https://tenantname.b2clogin.com/',
tenant: 'tenantname.onmicrosoft.com',
Another issue might be if your B2C tenant quite new, Microsoft could be blocking support for microsoftonline for your tenant. In this case, try switching to the b2clogin.com domain as your instance.
You can see a possible value for this url when opening the user flow in the Azure Portal.
As a sidenote, I would suggest switching to a different react library. The one you are using is not really being maintained. We are currently using https://github.com/syncweek-react-aad/react-aad

CORS settings not being applied to Azure Function?

While testing the API definition of my Azure Function (within the portal) I get this CORS error:
This is a cross-origin call. Make sure the server at ***.azurewebsites.net accepts POST requests from functions.azure.com. Learn more
I verified that this is listed as a CORS allowed origin within the function settings:
https://functions.azure.com
Am I missing something?
I cannot reproduce this on my side.
I added the following to ALLOWED ORIGINS:
The output in the Azure portal:
I also test it by making a POST request to the function in the browser via jQuery:
If you want us to dive into this problem you may need to provide detailed steps to reproduce.
The problem turned out to be the API definition. CORS was working fine although that was indicated as the problem in the error messages. The missing piece in the API definition was
security: []
which was missing in the POST section. I guess the security entry is required even if it's empty. It would've been nice if there was a warning that this was missing.

Videogular2 gives cors error for Azure DRM protected content

I am using Videogular2 for azure content playback. The contents hosted on azure without DRM works perfectly. When I implement DRM protected content having token authentication gives CORS error. The error is thrown while fetching license from license server.
Following is my code
stream = {
source: 'http://xxxxx.streaming.mediaservices.windows.net/xxxxxxx/abc512kb.ism/manifest(format=mpd-time-csf)',
licenseServers: {
'com.widevine.alpha': {
serverURL: 'https://xxxxxx.keydelivery.westindia.media.azure.net/Widevine/?KID=xxxxx-ef40-87ed-b348-xxxxxx'
}
},
token: 'Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}
<video #media
[vgMedia]="media"
[vgDash]="stream.source"
[vgDRMLicenseServer]="stream.licenseServers"
[vgDRMToken]="stream.token"
id="singleVideo"
preload="auto" crossorigin
>
</video>
I got following error while fetching license from license server.
Response to preflight request doesn't pass access control check: The
value of the 'Access-Control-Allow-Origin' header in the response must
not be the wildcard '*' when the request's credentials mode is
'include'. Origin 'http://localhost:4300' is therefore not allowed
access. The credentials mode of requests initiated by the
XMLHttpRequest is controlled by the withCredentials attribute.
If I run it with disable-web-security of chrome then I call works perfectly.
Did any one face such issue while playing content from Azure Media.
Mandar -- Azure Media Services (AMS) origin sets the value of the 'Access-Control-Allow-Origin' header in preflight response as the wildcard ''. This works well with most players including our Azure Media Player, Roku and JW, and others. From the error, it seems Videogular2 does not work with AMS origin URL since, with credentials mode set to “include”, XMLHttpRequest in their dashjs does NOT allow wildcard “” as the value of “'Access-Control-Allow-Origin”.
Are you running the player from a single domain? If you are, we can set the request to include your incoming origin domain instead of the wildcard. Reach out to me at dwgeo at microsoft dot com and we can enable the feature on your account. Thanks.
I'm faced the same problem. Here is the Videogular2 source https://github.com/videogular/videogular2/blob/master/src/streaming/vg-dash/vg-dash.ts#L70
It work fine on same domain, but for different domain withCredentials=true is missing. after creating player on 70th line
this.dash = dashjs.MediaPlayer().create();
Should go this
this.dash.setXHRWithCredentials(true);
I hope it might help

"There was an error connecting to https://localhost:3443/users/login."

I'm attempting the final assignment for my course but not getting anywhere due to Oauth2 authentication difficulties. I'm having a great deal of difficulty resolving this! I think it may be due to the fact I'm using a work laptop which is SOE'd and pretty locked down.
I just don't know where to look to resolve this. Any suggestions?
Steps to replicate
1. I've set my Oauth2 application up in Facebook and with Site URL setting as https://localhost:3443/users/facebook/callback
2. When I attempt ANY method (get, post, put etc) on this url, I get the below.
I've tried:
1. bypassing my company's firewall and hotspotting my phone; note that this a workaround I use to install NPM packages as my company seems to block NPM
2. my course's forum\Stack exchange. It seems that I'm the only person in the galaxy that this has affected.
3. F12 in CHrome - there are no messages in the console
4. inserting debug clues in the user route, viz;
router.get('/facebook', passport.authenticate('facebook'),
function(req, res){
console.log('routergetfacebook');//------------------------debug
});
router.get('/facebook/callback', function(req,res,next){
console.log('router.get-facebook-callback');//------------------------debug
In Chrome
This site can’t be reached
In Postman:
Could not get any response
There was an error connecting to https://localhost:3443/users/login.
Why this might have happened:
The server couldn't send a response: Ensure that the backend is working properly
Self-signed SSL certificates are being blocked: Fix this by turning off 'SSL certificate verification' in Settings > General
Client certificates are required for this server: Fix this by adding client certificates in Settings > Certificates
Proxy configured incorrectly Ensure that proxy is configured correctly in Settings > Proxy
Request timeout: Change request timeout in Settings > General

ServiceStack: How do I use custom OAuthProvider to get access to Azure resources

Created custom provider that implements: OAuthProvider, IAuthWithRequest.
Created AuthenticateAttribute that calls PreAuthenticate() method of the provider.
Configured CorsFeature:
Plugins.Add(new CorsFeature(new[] { "http://localhost:23589", "*" },
allowCredentials: true,
allowedHeaders: "Content-Type, Allow, Authorization"));
Problem: when provider's Authenticate method is called to request a code from
"login.microsoftonline.com" (authService.Redirect(PreAuthUrlFilter(this, codeRequest)); ) the following error is thrown:
XMLHttpRequest cannot load https://login.microsoftonline.com/d331431b-899c-4666-8094-e82e6bfc3964/oaut…orts%2fpbi&scope=user_impersonation&state=f8e986304a47427d8c6a76767f2ef573. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:23589' is therefore not allowed access.
What is the correct way to:
Request an auth code from Microsoft
Get the code back in a query string
Request auth Token using the code
Authorization Code Grant Flow Diagram
Have a look at ServiceStack.Authentication.Aad. At a minimum this should offer a unit-tested reference implementation. Or perhaps you can use the NuGet package directly.
I encourage you to clone the repository where you can step through the stand-alone SelfHostTest as well as unit tests.
To my knowledge, CORS should not be necessary. I may be wrong. But in my implementation the JSON responses coming from Microsoft were handled by the server, not the web browser.
I'm sorry for not including a code sample in this response; it would be difficult to take a single snippet of code from that repository. The entire repository is the answer to your fundamental question.
Full disclosure: I'm the author of that plugin and garner Imaginary Internet Points for its use.

Resources