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.
Related
In my application I have got laravel as backend, jwt-auth as authentication, socialite as oauth2 provider and vue as my frontend.
Now I use axios to authorize the user by github for example (https://github.com/login/oauth/authorize) inside the client and then get the access token by the backend api.
If I do the authorize request with POSTMAN everything works, but if I do the request with my frontend axio request I get always errors. I think I get them because some Header values which are not correct. Can someone explain me which variables an axion request needs to perform an authorization request.
Kind Regards.
you can either disable cors in your browser which is very bad or you have to enable cors in your backend and to check if cors is enabled in your backend look for Access-Control-Allow-Origin header in browser network tab or you have to use proxy so that the requests are made to the same origin as seen by the browser but are redirected to some other url.
In create-react-app this works by adding
"proxy":"http://youUrl:portNo."
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
I am trying to develop a node app and require a server that can only be used by the app internally.
I have tried instantiating a server without listening to the port, but can't do anything with it from that point forwards:
let http = require("http");
http.createServer(function (req, res) {
// custom code
})
This app is being built with NWJS and I need to intercept any outgoing requests (including file resources; CSS, JS, images, etc.) and modify the response, but I am not having any success with it except if I use a server for this purpose.
Problem is it becomes possible to open that server on any browser and I just want it to be used only inside the app or another way to intercept outgoing requests from the app so that the response body can be modified.
I have tried Keith's suggestion of using a service worker to intercept requests, but in my case I could not load a service worker from local environment into live environment (for example, run a local sw file in stackoverflow page), so that suggestion ended there.
Stdob's suggestion of using a proxy ended up being redundant and more troublesome than my original attempt.
In the end I went with my original attempt as follows:
Using chrome.webRequest.onBeforeRequest (Chrome API) and a local node server.
The server is created with an arbitrary port to reduce the risk of hitting an already used port.
The chrome API redirects all connections to the local server (ex. url: http://127.0.0.1:5050) and then the server will handle the requests as needed, returning the requested files modified or intact.
Last step, add a unique header with a unique value that only the app knows, so that no server access can be made from outside the app.
It is not the best solution, ideally I would prefer to have something like Firefox's webRequest.filterResponseData, but until Chrome implements that, this will have to do.
I'm trying to figure out what is the "proper" way to make HTTP requests programatically from web application code when you don't know if you are or are not running behind reverse proxy (e.g. HTTPD).
Web application runs on root "/" context on web server
Proxy runs with context "/proxy" that proxies this that web server
Accessing index.html from browser should be requested via /proxy/index.html.
But what if there is some code in the web application (e.g. myscript.js) that sends HTTP request programatically (e.g. xhr.open("???/resource").
And here comes the problem because the code sends this HTTP request to /resource instead of sending it to /proxy/resource.
In other words, the code of web application (that runs in the browser) does not know if there is any or there isn't a proxy. Keep in mind that application can run behind proxy but there may not be any proxy at all. I have in mind 3 solutions:
1) Web application resolves context (e.g. /proxy) automatically by parsing it from the current window.location.path and send xhr according to it
2) Enhance web application to require some additional configuration of proxy from user and it appends the context if it is set
3) Configure proxy somehow to also resend non-proxy like URLs to web server 1:1 (e.g. /proxy -> webserver/, / -> webserver/)
Which one is "the proper" one or there are any other options?
Backend web applications should not be aware if there is proxy or not above or before them. They should ideally live in their own context path, eg. /application/ and if they need to send redirects do so without using hostnames or url schemes in it, just URL-Path /application/*
Then ideally you can do easy reverse proxy directives according to your number 3 scenario:
ProxyPass /XXX/ http://backend/application/
ProxyPassReverse /XXX/ http://backend/application/
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)?