I have an Electron App, which uses Angular 2 - in order to work i needed to modify <base href="/"> to <base href="./">, which is a relative path in the file system. But now the API doesn't work anymore (Webclient on localhost works fine, but not Electron Client).
I access the API via proxy.conf.json
{
"/api": {
"target": "http://127.0.0.1:4747/Ticketsale",
"secure": false
}
}
And the error message in the JavaScript Console of Chromium / Electron is:
file:///Users/myusername/folder/apps/officeclient_electron/office-client-darwin-x64/office-client.app/Contents/Resources/app/api/1/initialData
Failed to load resource: net::ERR_FILE_NOT_FOUND
How can i tell Electron to access the local resources via relative Path and consume the API via HTTP?
We enabled CORS on the Webserver and this setting allowed us to consume the REST-API from a different URL.
See https://en.wikipedia.org/wiki/Cross-origin_resource_sharing for details.
Related
We are trying to implement path-based routing using Istio virtual service. Our application is react based SPA and it expects “/” instead of the path. We want to have a single host and we pass the app name as a parameter along with the URL and expect to reach the applications like
https://digital.example.com/app1 and https://digital.example.com/app2
we tried to define “/app1 or /app2” in virtual service as a routing rule instead of “/”, but SPA is not getting loaded and we are getting 404.
and tried the below configuration.
http:
- match:
- uri:
prefix: /
route:
- destination:
host: app1
port:
number: 80
Reference used: Istio Ingress routing fails with 404 for Nginx/Angular app
This is working for app1 and tried the same rule for app2.and it is not working, getting a blank page. / should be routed to Frontend to get the Index.html.how do we handle this issue? Any help is much appreciated.
I have developed angular application in my local machine.
In my application I'm making the rest call to get the data.
So in my local machine I'm getting the CORS issue.
But when I deploy this angular application on the same server with same port
i.e. both rest api and my application are on same server with same port.
REST API:- http://domain:port/api
App URL:- http://domain:port/home
Then also I'm getting the CORS issue while making the call to rest api.
Please explain me how to resolve this.
Thanks,
Suresh
On your local machine you can create a proxy to redirect calls to the api to be on the same port as your angular app. Create a file called proxy.conf.json and put the following in it changing apiport to your apis port number.
{
"/api/*": {
"target": "http://localhost:apiport/api/",
"pathRewrite": {
"^/api": ""
},
"changeOrigin": true,
"secure": false,
"logLevel": "debug"
}
}
and then start the app with
ng serve --proxy-config proxy.config.json
or add the following to the scripts section of your package.json file
"localstart": "ng serve --proxy-config proxy.config.json",
and start with
npm run localstart
We currently have a Ionic v1 project that calls an API implemented as a Google App Engine application. This Ionic app runs with Ionic serve, PhoneGap, and when deployed to Android/iOS.
We are now trying to deploy to the web using Firebase hosting.
The initial HTML/JS code all runs correctly until we reach an $http.get call to the Google App Engine. What happens then is that the request reaches the GAE server and is processed correctly there with a response being sent back. But in the client code, the response.data property is the contents of the Firebase application’s index.html rather than the response that was supplied from GAE.
We don’t know why this is happening, or how to fix it, but here are some relevant facts:
When we run the app on a device using PhoneGap or via the Google Playstore, the URL by which we access GAE is the same URL if we were accessing GAE from a browser. But, when we run the app via “ionic serve” we must use a proxy to work around a CORS issue. What we do is to specify a simplified URL in the Ionic code, and then provide a mapping of that simplified URL to the GAE’s actual URL in a file called “ionic.project” which looks something like this:
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}
When we attempt to deploy the app via either “firebase deploy” or “firebase serve” we must use the proxy version of the URL in our $http.get call. Otherwise the call does not reach the GAE server at all. It is not clear how Firebase knows to use “ionic.project” for the proxy mapping.
We are not using “Angularfire”, only the standard AngularJS library that is packaged with Ionic 1.x
Thanks for any help you can offer.
I am able to access the client server in Angular 5 from localhost:4200 with Cross-Origin concept but when I am deploying the app using ng build to Pivotal Cloud Foundry, getting error Failed to load resource: the server responded with a status of 404 (Not Found).
Not able to figure out the exact issue.
I am using package.config.json as -
{
"/api": {
"target": "https://benifit.cfapps.io/api",
"pathRewrite": {
"^/api": ""
},
"changeOrigin": true
}
}
Also, I am using cf push -b staticfile_buildpack portal-app for pushing my app to PCF. Please suggest where and what I am missing
You are referring to the proxy config file from angular-cli dev server. This file is only used for local development, to avoid cross-origin requests. You cannot use this proxy, after the app is deployed.
So in your case the Angular app will directly query your backend underneath the following path /api. So you have to ensure the api is available at the same host (in cloud foundry). When the api is only available under benifit.cfapps.io/api, you have to change the base path for your HTTP queries in the app and also take care to enable cross-origin requests on the api side.
I have just generated an Spring/Angular app using JHipster.
I successfully accessed the home page by using this URL: http://localhost:8080 which redirects to http://localhost:8080/#/ and the index.html file is loaded properly.
I am not sure how Angular and the browser determine that they need to load the index.html file.
Where is this configured in a JHipster app?
edit: Is there some "default home page" configuration somewhere?
I successfully accessed the home page by using this URL:
http://localhost:8080 which redirects to http://localhost:8080/#/
The request to the server is for "/" and index.html is served. The "/#/" is all client side stuff (Angular routing) that happens when the javascript on the index.html page fires up, not the result of a server side redirect.
Where is this configured in a JHipster app?
This is a Spring Boot default, not something specific to JHipster. From the Spring Boot docs:
The auto-configuration adds the following features on top of Spring’s
defaults:
Static index.html support.
By default Spring Boot will serve static content from a directory
called /static (or /public or /resources or /META-INF/resources) in
the classpath or from the root of the ServletContext. It uses the
ResourceHttpRequestHandler from Spring MVC so you can modify that
behavior by adding your own WebMvcConfigurerAdapter and overriding the
addResourceHandlers method.
I don't think this is configurable through a property file or something similar, you'll have to write some code. See the answer to this question.