I have a backbone-js app, and i need make requests to the backend api but it's a different app which serves the backbone app.
In other words, i have a classic mvc app (app #1) that have all the backbone js files.
The backbone app (app #2) needs to make fetch (requests) to the backend api (app #3).
But i'm having an error like this in the bacbone app:
XMLHttpRequest cannot load http://foo ... No 'Access-Control-Allow-Origin' header is present on the requested resource.
I tried to add that header to the response but still not working.
Is there a way to allow the cross domain request or i'll have to make the requests from backbone to app #1 and then the app #1 make the same request to the backend (app #3)?
Related
I have MVC dot Net Core app 2.0. The App authenticates against IdentityServer4 using Hybrid grant, so I have:
services.AddAuthentication(o =>
{
o.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
o.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
o.DefaultChallengeScheme = "oidc";
})
.AddCookie("Cookies")
.AddOpenIdConnect("oidc", options =>
{......
and this works fine.
I also have a JavaScript client which authenticates against same IDP using implicit grant and that also works fine. I wanted to allow the javascript client calling an API (controller inside the MVC app) passing bearer token.
If that API has an Authorize attribute I am getting:
Failed to load http://localhost:4444/testidentity: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5003
I have CORS taking care off and the call works if I do not require Authorization at the API controller level.
I can easily move API into a separate project and having in the API something like:
services.AddAuthentication("Bearer")
.AddIdentityServerAuthentication(options =>
{.......
This would work, but I would like to have it working in the MVC app and apparently missing some middleware configuration.
I guess your MVC app using openid bearer and cookies authentication, make sure to have the API (controller in MVC app) authentication schema as "bearer" then it will look for a bearer token in the request (regardless whose calling the API passing your CORS policy defined for your app) and verifies as per your middleware configuration for bearer token validation.
Also make sure, the access token has MVC app required scope to call controller.
I guess you will need something like below
[Authorize(AuthenticationSchemes =
JwtBearerDefaults.AuthenticationScheme)]
For more information refer this
It sounds like you are making a HttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.
Quoted from Cross-Origin XMLHttpRequest:
Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.
Identityserver 4 needs to be configured for CORS. I suspect you need to add something like this Allowing Ajax calls to the Web API with CORS
Locally, my Angular 1.x web app has no problem communicating with a RESTful API I have running on my machine. However, when I launch the API and web app into production, I get the following error:
XMLHttpRequest cannot load https://api-domain-name-removed/api/common/protected/locations?l=1000. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values ',,*', but only one is allowed. Origin 'https://client-domain-name-removed' is therefore not allowed access.
I also see this OPTIONS request failure:
However, when I use Postman, I am able to make a request against the production API without problems:
Any ideas why the request is failing from the web app?
Please note that in production, the API is running with nginx reverse proxying to an Express app, and the web app is running inside a Docker container. Also note that this same error occurs in both Chrome (v55) and Firefox (v47).
In my Angular2 application, I am making an HTTP call using the HTTP service that Angular2 provides. I see that the request that it sends contain the header 'Origin', with a value. Can someone please tell me if there is anyway we can prevent Angular2 from appending the Origin header to the HTTP request?
If you can't modify the server code to allow from your current origin, you can leverage the fact that Electron is running on top of node.js. You will want to add something like Express to your node.js/electron setup, that will act as a proxy between your XMLHttpRequests from Angular 2 and your server. So your http route will be (Angular 2 Http) => Express => Server.
I'm working on a single page app that uses Backbone.js and marionette on the front end, and Django with Tastypie on the back. I just added a ssl certificate to the web server, and redirected all the http traffic to https.
Everything seems to work fine except for the backbone (sync) request that continues to send request over http, causing the browser to block those requests, and I don't know how to tell backbone to use https by default.
The backbone models url/urlroot are relative so they should take the same protocol as the rest of the site right? Thanks,
Backbone.sync is a wrapper around jQuery.ajax(...) in the end. You are correct that Backbone (via jQuery) should use the protocol of the hosting page. And the Same Origin Policy dictates the browser reject any request made to a different host, port, or protocol.
All this suggests the way you're hosting the page is getting jQuery's signals crossed. If you access the page directly via HTTPS instead of relying on the HTTP --> HTTPS redirect, does it work? If so, the problem isn't a Backbone one, but a hosting one.
I'm developing an angular application that executes ajax calls to web services to get/post data. The issue is that my app runs under a secure protocol (https), but the services are exposed using a non secure protocol (http) so everytime it tries to get/post data Ithe console shows this message: "Mixed content: the page https://myappdev.abcdomain.com/app/index.html was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://myservice-a-bus.abcdomain.com/moduleUserApp/verifyUser'. This request has been blocked; the content must be served over HTTPS." I found this is related to Cross-Domain Resources and that the xdomain patch would fix it. So I tried implementing it but I can't figure out where to add the proxy.html file. Below is where my app is and some of the services I call:
Angular app is
https://myappdev.abcdomain.com/app/index.html
The services I call are (get/post):
http://myservice-a-bus.abcdomain.com/moduleUserApp/verifyUser
http://myservice-b-bus.abcdomain.com/moduleFriendList/get/{"friendList": "ListA"}
http://myservice-c-bus.abcdomain.com/moduleCountryList/get/{"countryList": "Canada"}
Hope anyone can help with this issue.