I have a vue.js frontend and I need to make api calls to an external api which doesn't allow cross-origin.
Is there a way to proxy this in the vue frontend, in development I used a devServer proxy and this worked. I could always forward it through my own spring backend but this seems like a worse solution then just proxy in the fontend.
You can't do it in production, proxy through bachend server seems right solution for you.
Also you can do a lot of stuff, like caching answers from external api, working with data immediately, without additional frontend work. Just try to do it.
If i were you, i'd just create/add separate service on backend that should work with that api.
Related
I'm having an issue with a project I'm working on. I have a Vue client which does API calls to my backend which is written in .NET Core 3.1. Both these applications are deployed on diffent servers.
Now the problem is that my backend server does not allow me to do API calls straight from the browser. So I have to do some kind of 'redirect' on the client server to reach my API.
So for example:
If I call backend_server/api/values I get an error (Firewall).
I think I should make like a second API or something, but I'm not sure how to handle this issue.
Does anybody have any experience on this? Any help is welcome!
Kind regards
You can have multiple options here
Remove the firewall rule -
This will allow your API to get hit from browser. If firewall is not managed by you you can't do this
Add IP or Port exception rule in firewall -
Instead of deactivating the entire inbound rule on server, you can allow specific ports or IP on firewall. Again if you have control on firewall
Create Proxy API -
Another way is you can create a middleware API that forwards your request and acts as a proxy. This will suffice performance, resource, time and compromise security. I recommend not to do this, But it's easily possible in .NET Core
Specify CORS policy -
If your Vue.js and API originates from same origin (IP), You can configure CORS in server which will restrict access to API only from same origin. That means only www.google.com can access GoogleAPI, Likewise. This will protect the API from other origins
Tunnel via VPN -
If security is a concern, Use a VPN service to tunnel your API requests. This can't be possible for every client using your web service.
The best way is to open a specific rule on server for your application if possible. Writing a proxy in between will have lot of disadvantages although can be accomplished.
I separated my frontend from my backend and I am configuring my frontend part.
I am doing API requests to the backend with a proxy middleware in production now and my question is, can it harm my frontend app in anyway? is there anything why I shouldn't use a middleware proxy for this?
for me, a middleware proxy is a smooth solution to communicate with the backend and everything works out of the box.
the other option would be to setup a bunch of CORS exceptions but I am not happy with that.
Yes, but only if you're handling the scaling case.
Keep in mind that JavaScript is single-threaded. While NodeJS is quite efficient, at some point it is likely that user's requests will begin to timeout since the single thread isn't able to service all the requests. When that happens, you may end up needing to re-design your application.
Take a look at pm2 as well as cluster mode if you haven't already. As long as your proxy middleware is configured to work in tandem with this, you should be fine.
Im using Nuxt.js to build a frontend for some data I pull from a REST API. Now I need to call functions on a remote service, ideally via gRPC since the service has a endpoint for that.
I searched the web but I guess Im misunderstanding the whole process of creating a frontend with nuxt, since I cant find any information on that topic.
How can I, for example embed the solution provided here: https://github.com/grpc/grpc-node into my frontend?
nuxt is frontend. and the lib you are linked for backend. Nuxt dont care how you get your date, e.g. grpc or rest or anything. You need to use grpc javacsript client that work in browser e.g. https://github.com/grpc/grpc-web
We wish to build a web app that will consume our REST API and looking for a way to circumvent the Same Origin Policy security feature.
We have a REST API which is served from api.ourdomain.com from SERVER_1.
We have a Web App which is server from dashboard.ourdomain.com from SERVER_2.
The Web App communicates with the REST API using ajax calls that include GET, POST, DELETE and PUT requests.
At some point in the future, we might consider allowing 3rd party sites to access the API from their own sites and domains.
Due to the Same Origin Policy security feature of the browsers, these requests are not allowed.
We are looking for ways to circumvent this.
Solutions we have encountered:
Tunneling the requests through our proxy. This will slow down the app and requires more resources.
JSONP - Will only work for GET requests. We do not wish to overload the GET requests with post/put/delete capabilities.
Using an iFrame with document.domain set to the same domain. Will only work for sites under ourdomain.com.
Frameworks such as EasyXDM. Seems like a good solution.
Thank you!
I don't know EasyXDM but I have the same architecture you are talking about in more than one application. We use your suggested solution (1). In my opinion proxying the requests through a common subdomain is the cleanest solution. I don't think that this is a performance problem. Many sites use something like nginx anyway to do some sort of reverse proxy (as cache). You could easily tunneling your API through http://[yourhost]/api and the rest of the HTML, CSS and image resources through other paths.
The question is as simple as the title. I have a webapp (I have no clue as to what technology it was built on or what appserver it is running on). However, I do know that this webapp is being served by an Apache Server/ IIS Server / IBM Http Server. Now, I would like to have a plugin/ module / add-on at the web-server end, which would parse/truncate/cut/regex the http response (based on the requested url's pattern), and mask(encrypt/shuffle/substitute) a set of fields in this response based on different parameters(user's LDAP permissions in the intranet / user's geo-location if on the internet, etc) and send the altered response back to the user.
So, Is there an easy answer to creating such plugins/modules/add-ons? How feasible is this approach of creating extra software at the webserver, when you want to mask sensitive information in a webapp without modfying the web-app code? Are there any tools that help you do this for Apache?
And, finally, is this just a really crazy thing to try?!
Each webserver will have its own way of doing so.
There is no universal plugin architecture for webservers.
In IIS you would write an HTTP Handler or HTTP Module, or possibly an ISAPI Filter. You can also directly interact with the http response using the Response object exposed by the HttpContext.
With apache, there are different modules that can do what you want (mod_headers, for example).
I don't know anything about WebSphere, but I am certain it also has similar mechanisms.
What you are asking is required by most web applications, so would be either built in or very easy to do.
The easiest way is to add a plug-in using the web application container. For example, if it's Tomcat, you can add a filter or valve.
If you want to plug-in to the web server, you'd need to write a custom module using the API of whichever web server is being used.
If all else fails, you could always wrap the entire server in a reverse proxy. All requests would go through your proxy and that would give you the opportunity to modify the requests and the responses.