how to proxy API requests? (Angular-CLI) - spring

I'm working on Java project with Spring-4 and Angular-5. Session is generated on spring side.
So, I'm not able to generate this session from angular Service. It's working on Postman and I'm able to get response in PostMan.
But It's not working with Angular post method call.
So, I thought that it's may be a issue of Proxy. (Corrent me If i'm wrong).
So, My local Url is :- http://localhost:8080/MacromWeb/ws/login
So, How Can I make a proxy.conf.json file?
So for that I have added this code to my package.json file,
"start": "ng serve --proxy-config proxy.conf.json",
I have created a new file called proxy.conf.json.
And Put this code in it.
{
"/": {
"target": "http://localhost:8080/MacromWeb/ws",
"secure": false
}
}
Then I tried with ng serve and npm start both.
Postman Screenshot.

You can achieve this through proxy, You need to provide proper values in the proxy config.
/* should work too, but if MacromWeb is common in API URLs, then instead of / provide /MacromWeb/*
proxy.conf.json looks something like this,
{
"/MacromWeb/*": {
"target": {
"host": "localhost",
"protocol": "http:",
"port": 8080
},
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
Hope it helps.

Say we have a server running on http://localhost:3000 and we want all calls to http://localhost:4200/api to go to that server.
In our proxy.conf.json file, we add the following content
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
More on this: here

Related

Strapi deployment to Heroku

I am totally new on Strapi and Heroku. I am trying to deploy my app that is working well locally to Heroku but I am getting the following error:
2020-06-15T09:56:29.114780+00:00 app[web.1]: [2020-06-15T09:56:29.114Z] error Impossible to register the 'menus.menus' model.
2020-06-15T09:56:29.115672+00:00 app[web.1]: [2020-06-15T09:56:29.115Z] error TimeoutError: Knex: Timeout acquiring a connection. The pool is probably full. Are you missing a .transacting(trx) call?
At the beginning I thought it was a problem connecting to the database, but in my local environment it work perfectly and connect with no issues.
I even upgraded my database to a paid version in case the connection is timing out.
I also follow some answers I found only about modifying my config/environment/production/database.json as follow:
{
"defaultConnection": "default",
"connections": {
"default": {
"connector": "bookshelf",
"settings": {
"client": "postgres",
"host": "***.compute-1.amazonaws.com",
"port": "5432",
"database": "***",
"username": "***",
"password": "***",
"ssl": { "rejectUnauthorized": false }
},
"options": {
"debug": false,
"acquireConnectionTimeout": 100000,
"pool": {
"min": 0,
"max": 10,
"createTimeoutMillis": 30000,
"acquireTimeoutMillis": 600000,
"idleTimeoutMillis": 20000,
"reapIntervalMillis": 20000,
"createRetryIntervalMillis": 200
}
}
}
}
}
Any other idea of what can it be?
When I run the develop locally I got a warn (but even this the app run anyway after):
[2020-06-15T10:36:41.261Z] warn The bootstrap function is taking unusually long to execute (3500 miliseconds).
[2020-06-15T10:36:41.261Z] warn Make sure you call it?
[2020-06-15T10:36:42.476Z] warn The bootstrap function is taking unusually long to execute (3500 miliseconds).
[2020-06-15T10:36:42.476Z] warn Make sure you call it?
One simple first step option is to launch a strapi quickstart application on heroku. You can find this link here.. https://github.com/strapi/strapi
Relaunching with this method will provide you with a working, secure instance to begin development on.
Also note that heroku deploys strapi to production, so that you are not able to use the content-types editor, so it is recommended that you develop locally & test your app and use the heroku cli to update your deployment.

angular8 proxy being directed to localhost:4200

I have configured a proxy for api calls to a serve in localhost:5000.
However, the proxy is being directed to localhost:4200 .i.e the angular application.
"Http failure response for http://localhost:4200/api/: 404 Not Found"
my proxy.conf.json:
{
"/api": {
"target": "https://127.0.0.1:5000/",
"secure": false,
"changeOrigin": true
}
}
my call to the url in a service :
private apiurl = "/api";
constructor(private http: HttpClient) { }
getData() {
return this.http.get(this.apiurl);
}
I have edited 'start' in package.json
"start": "ng serve --proxy-config proxy.conf.json",
I am not getting any compiling errors.
I want /api to go to the target provided in the proxy conf file
I am extremely sorry for this question, the issue was in my backend routing

Angular Apollo GraphQL Devtools tab invisible

I am developing an app using Angular 7 and Apollo GraphQL client and I am trying to use the client devtools for Chrome. If I understood the documentation correctly, the only thing that I have to do is to run my app in a non-production environment and the Apollo tab will appear on the Google Chrome development tools.
Unfortunately this is not happening. The Apollo Devtools icon appears on my browser, but the Apollo tab does not appear on the devtools.
Am I missing some configuration?
I also tried to force the devtools to appear, by adding: connectToDevTools: true to my GraphQL module (code below), but this didn't solve the problem.
const uri = environment.graphqlURL; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink) {
return {
link: httpLink.create({uri}),
cache: new InMemoryCache(),
connectToDevTools: true
};
}
#NgModule({
exports: [ApolloModule, HttpLinkModule],
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
},
],
})
export class GraphQLModule {}
I found out what the problem was: I was having a CORS error when I tried to use my Graphql endpoint from the Angular development server (localhost:4200), so I created a proxy that pointed to my endpoint:
{
"/graphql/*": {
"target": "https://my-endpoint/",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
And changed the Graphql URL to: http://localhost:4200/graphql. With this I was able to solve my CORS issue, however it seems that the Apollo Dev Tools also uses the /graphql URI.
So I changed my proxy configuration to:
{
"/stg_graphql/*": {
"target": "https://my-endpoint/graphql",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {
"^/stg_graphql": ""
}
}
}
And pointed the graphql to: http://localhost:4200/stg_graphql. When I did this, everything started working.
Note: to run the development server with the proxy I am using: ng serve --proxy-config proxy.config.json.

Ionic 3 Cordova ajax calls fail on Windows 10 (UWP)

I have attempted to ask this previously, buy got no real answers, and have now been struggling for over a month.
I just cannot get my ajax calls to work on an Ionic 3 Cordova application built for a Windows 10 UWP. They can access localhost, but not any outside connections.
The application works fine on both Android and iOS.
I am trying to test this locally on my dev machine. I use a certificate (bought) to sign the application, install this certificate, build the application for Windows, and am able to open up the built CordovaApp.Windows10_1.0.1.1_x86.appxupload, and then double click the embedded CordovaApp.Windows10_1.0.1.1_x86.appx file to install, which completes successfully. The install indicates the app need internet access.
In the config.xml, I have the following tags, as suggested elsewhere...
<allow-navigation href="*" />
<access origin="*" />
However, when I run, the http.get call just returns 0 with no other information. I can run in Visual Studio, and look at the returned error object, and get no further info, apart from this 0 return.
I have run fiddler, enabled the https decryption as explained here, but all I see in the response header is
HTTP/1.0 200 Connection Established
FiddlerGateway: Direct
StartTime: 13:44:21.686
Connection: close
The result in the main view actually shows 200, so I don't think this is showing me anything real.
I am at a complete loss. I have no where else to search. What could I be missing?
Should I be able to use external ajax on a Windows 10 machine, when I have sideloaded the application as here? I haven't tried from the store yet, as I don't want to upload until I know it works.
Any suggestions desperately welcomed. Surely someone has had an Ionic 3 application accessing external ajax working?
Thanks in advance for any help
[UPDATE 1]
If I run the application on the same machine, just using Ionic serve (so it just runs in the browser rather than hosted in the UWP), the ajax calls also work fine.
[UPDATE 2]
I have now created a Cordova application using the Visual Studio template, so taking all other frameworks out of the equation.
I used vanilla JavaScript to do my rest call...
document.addEventListener('deviceready', callUrl, false);
function callUrl() {
console.log('callUrl');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://myserveraddress.com/myapp/testroute');
xhr.send(null);
xhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
if (xhr.readyState === DONE) {
if (xhr.status === OK)
console.log(xhr.responseText);
} else {
console.log('Error: ' + xhr.status);
}
}
};
I run this in the debugger, and even here I get an error (status code of 0).
Another thing I noticed when I open up the build package and look at the cordova_plugins.js file..
My Ionic app has the following...
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"id": "cordova-plugin-console.logger",
"file": "plugins/cordova-plugin-console/www/logger.js",
"pluginId": "cordova-plugin-console",
"clobbers": [
"cordova.logger"
]
},
{
"id": "cordova-plugin-console.console",
"file": "plugins/cordova-plugin-console/www/console-via-logger.js",
"pluginId": "cordova-plugin-console",
"clobbers": [
"console"
]
},
{
"id": "cordova-plugin-device.device",
"file": "plugins/cordova-plugin-device/www/device.js",
"pluginId": "cordova-plugin-device",
"clobbers": [
"device"
]
},
{
"id": "cordova-plugin-device.DeviceProxy",
"file": "plugins/cordova-plugin-device/src/windows/DeviceProxy.js",
"pluginId": "cordova-plugin-device",
"merges": [
""
]
},
{
"id": "cordova-plugin-splashscreen.SplashScreen",
"file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
"pluginId": "cordova-plugin-splashscreen",
"clobbers": [
"navigator.splashscreen"
]
},
{
"id": "cordova-plugin-splashscreen.SplashScreenProxy",
"file": "plugins/cordova-plugin-splashscreen/www/windows/SplashScreenProxy.js",
"pluginId": "cordova-plugin-splashscreen",
"runs": true
},
{
"id": "cordova-plugin-statusbar.statusbar",
"file": "plugins/cordova-plugin-statusbar/www/statusbar.js",
"pluginId": "cordova-plugin-statusbar",
"clobbers": [
"window.StatusBar"
]
},
{
"id": "cordova-plugin-statusbar.StatusBarProxy",
"file": "plugins/cordova-plugin-statusbar/src/windows/StatusBarProxy.js",
"pluginId": "cordova-plugin-statusbar",
"runs": true
},
{
"id": "ionic-plugin-keyboard.KeyboardProxy",
"file": "plugins/ionic-plugin-keyboard/src/windows/KeyboardProxy.js",
"pluginId": "ionic-plugin-keyboard",
"clobbers": [
"cordova.plugins.Keyboard"
],
"runs": true
}
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-console": "1.0.5",
"cordova-plugin-device": "1.1.4",
"cordova-plugin-splashscreen": "4.0.3",
"cordova-plugin-statusbar": "2.2.2",
"cordova-plugin-whitelist": "1.3.1",
"ionic-plugin-keyboard": "2.2.1"
};
// BOTTOM OF METADATA
});
Now, I notice every plugin in the module.exports.metadata also has an entry in the module.exports EXCEPT for cordova-plugin-whitelist!
If I open the same file for the Corvoda application created in VS, I see the following...
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-whitelist": "1.2.2"
};
// BOTTOM OF METADATA
});
So this has nothing else for the whitelist plugin as well
Could there be something missing here?? Could this white-list plugin not be installed correctly?
I had a similar situation where my ajax calls worked fine in TEST, but when I moved to PROD, they would fail.
The answer was finally tracked down as a missing intermediary certificate on the server I was trying to access. TEST had the cert, PROD did not.
I hope this helps.

How set proxy headers in proxy.config.json file for angularcli project

I'm trying to set proxy headers for angularcli. Here's what I have so far in my proxy.config.json file:
"/api": {
"target": "https://applications.str.coni.com/api",
"secure": false,
"logLevel": "debug"
But I haven't had any luck so far, perhaps I'm missing something (probably in another file). Any suggestions would be much appreciated.
Angular-cli uses http-proxy-middleware https://github.com/chimurai/http-proxy-middleware
there is an option called headers that you can use: https://github.com/chimurai/http-proxy-middleware#http-proxy-option
example:
"/api":
{
"target": "https://applications.str.coni.com/api",
"secure": false,
"logLevel": "debug",
"headers": {"host":"www.example.org"}
}
You can modify both request and response headers and request is easy with the code from #AhmedMusallam answer but for response headers you'll need to change file to proxy.config.js and modify proxy config file to look like this:
const PROXY_CONFIG = {
"/api": {
"target": "https://applications.str.coni.com/api",
"secure": false,
"logLevel": "debug",
"onProxyRes": function (proxyRes, req, res) {
proxyRes.headers['Access-Control-Allow-Headers'] = 'Authorization';
},
},
};
module.exports = PROXY_CONFIG;
I am using Angular CLI v13 and its uses bypass interceptor for modifying the headers.
sample code of proxy config put it in a file and name it proxy.conf.js (you can choose any suitable name of the file as you like)
const PROXY_CONFIG = {
"/api/proxy": {
"target": "http://localhost:80",
"secure": false,
"bypass": function (req, res, proxyOptions) {
if (req.headers.accept.indexOf("html") !== -1) {
console.log("Skipping proxy for browser request.");
return "/index.html";
}
req.headers["X-Custom-Header"] = "yes"; // adding oe setting header
res.removeHeader('X-Header-Name'); //removing header
}
}
}
module.exports = PROXY_CONFIG;
and then simply run serve command with proxy.
ng serve -proxy-config proxy.conf.js

Resources