I am new to ionic and I try to setup a proxy configuration for different environments. I have several environment-specific config files in place which get loaded using webpack and an environment variable which is set before ionic is served (see: https://github.com/gshigeto/ionic-environment-variables).
Everything works as expected but I don’t know how to solve following issue:
My proxy configuration (ionic.config.json) looks like this:
"proxies": [
{
"path": "/api",
"proxyUrl": "https://dv.mydomain.com/api",
"rejectUnauthorized": false
}
]
and one of my http calls looks like this:
return this.http.get<User[]>(ENV.apiUrl + '/api/users')
I have to remove ENV.apiUrl because otherwise the pattern specified in the proxy config doesn’t get matched, but if I do so, I cannot distinguish between different environments anymore. I have tried to add the domain to the path of the proxy configuration, which did not work.
Is there a way to solve this issue?
I asked the same question in the ionic forum but no one answered so far.
The way I "solved" it so far is not to use Ionic proxies anymore. I've installed this plugin for chrome, which basically disables chrome's CORS protection by adding Access-Control-Allow-Origin: * to the response headers.
Can't the apiUrl just be a URL path component? Ex:
// environment.pro.ts
export const environment: any = {
apiUrl: '/pro'
};
// environment.dev.ts
export const environment: any = {
apiUrl: '/dev'
};
Then, something like:
// ionic.config.json
"proxies": [
{
"path": "/pro/api",
"proxyUrl": "https://example.com/api",
"rejectUnauthorized": false
},
{
"path": "/dev/api",
"proxyUrl": "https://dev.example.com/api",
"rejectUnauthorized": false
}
]
CORS issue will only be specific to the local development as Ionic uses browser for local developement.
In mobile all the javascript will be copied as file://
Thus origin will not be exist.
So to handle this you can install the chrome extention
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
This should solve the problem.
Related
I'm using scully for prerendering bunch of routes, and I skip routes for /board/:boardId:
routes: {
"/board": {
type: 'ignored'
}
},
extraRoutes: ["/",
"/dashboard",
"/uses"
]
The /board route is dynamic, i.e. it looks like /board/[user-generated-boardId], but when I navigate to it using npx scully serve, It breaks, e.g.
I don't want to prerender /board/:boardId routes, and they should work just like an angular SPA, but seems like scully server is trying to map them to a directory path within dist.
Any suggestion on how I can get both static and dynamic routes working with scully, would be great ! Thanks.
When Scully can not find a route it should default to the expected Angular client side rendered page generation. To take advantage of some of the benefits of static pages and Scully you could generated a base page for dynamic routes tell Scully to ignore the remainder of the dynamic route.
Example is turning this routing-module path:
const routes: Routes = [
{ path: 'stuff/:id', component: StuffComponent },
];
Into two routes where one is generated and the other is ignored:
const routes: Routes = [
{ path: 'stuff', component: StuffComponent },
{ path: 'stuff/:id', component: StuffComponent },
];
Don't forget to ignore the dynamic route in your scully.app-name.config.ts
export const config: ScullyConfig = {
projectRoot: './src',
projectName: 'app-name',
outDir: './dist/static',
routes: {
'/stuff/:id': {
type: 'ignored',
},
},
};
If you need to turn OFF or ON specific content when either running or generating utilize Scully's 2 utility methods isScullyRunning() & isScullyGenerated()
WARNING
By design the Scully dev server WILL NOT LOAD DYNAMIC ROUTES. That is, if you follow the above approach npx scully serve will still result in the Cannot GET ... error. You will have to use a fully featured server to run to see the results. For example in your terminal:
cd dist/static
npx http-server
You defined a route for /board which will exclude that route.
However, you did not define a route for /board/:boardId so Scully will try to render that route.
Amend your config like this:
"/board": {
type: 'ignored'
},
"/board/:boardId": {
type: 'ignored'
}
},
That will likely solve your issue.
For the other part of your question, Scully will try to match the routes it found during discovery by default. This is done so you will be alarmed during testing that this route isn't there. After all, the Scully server is a development, not a deployment tool.
If you need/want to serve the index.html on routes not found, you can use the 404 option.
You can add that to your CMD line like this:
npx scully serve --404=index
By doing that, Scully will serve the index.html on any route that is not pre-rendered.
The answer is for firebase hosting, but should apply more generally.
As I'm using firebase hosting, I solved it using firebase hosting config within my project's firebase.json:
{
"hosting: [
{
"target": "static",
"public": "dist/static",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/dashboard/**",
"destination": "/dashboard/index.html"
},
{
"source": "/uses/**",
"destination": "/uses/index.html"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
This config dictates that dashboard and uses routes should map to specific folder paths, and rest should map to index.html in the root directory.
Reference: https://firebase.google.com/docs/hosting/full-config
==
P.S. My local server with npx scully serve still can't load those dynamic /board/** routes, but at least it works when deployed to firebase. Suggestions very welcome!!
I'm actually trying to use nuxt-mail in a personnal project,
During my development phase, I receive all my testing mails. And from there I did the following adjustments to do the exact same request from my builded site :
//nuxt.config.js
env: {
baseUrl:
process.env.NODE_ENV === 'dev'
? 'http://localhost:3000'
: 'https://my-domain.netlify.app'
},
My code when using the 'send' function :
this.$axios.$post(process.env.baseUrl + "/mail/send", {
config: 'contact',
from: document.getElementById('input-2').value,
subject: document.getElementById('subject').value,
text: "This is a text message",
})
It continues to work well with localhost/3000/mail/send but I have a 404 error once I build my site and using https:/ /my-domain.netlify.app/mail/send :
POST https://my-domain.netlify.app/mail/send [HTTP/2 404 Not Found 186ms]
Uncaught (in promise) Error: Request failed with status code 404
I'm actually struggling to solve this problem, am I missing something ?
Alright, so if your target is static, you can only do yarn generate.
If you do have the default, aka target: server, you can only yarn build.
Then, as talked about it a bit here: Sending mail in Nuxt.js with nuxt-mail
You cannot use a Node.js package in a static environment, so neither yarn generate nor Netlify will help you here. You need to yarn build and host it on something like Heroku.
One last step that you can do, is to try it locally with the following:
target: server
yarn build
yarn start
make your POST call with Postman or alike
If it does not work here, it is a code issue and you can look into the hosting one.
If it does work locally, you can proceed to the hosting issue that you'll face.
Well you just misunderstood the env field in the nuxt.config.js file.
That env field is passed to the $config Object of the Nuxt App and not passed to process.env.
What you want is to set the BaseUrl for the Axios Module
// nuxt.config.js
axios: {
baseURL: process.env.NODE_ENV === 'dev'
? 'http://localhost:3000'
: 'https://my-domain.netlify.app'
},
// or provide a runtime config
// server and clientside
publicRuntimeConfig: {
axios: {
browserBaseURL: process.env.BROWSER_BASE_URL
}
},
// serverside only
privateRuntimeConfig: {
axios: {
baseURL: process.env.BASE_URL
}
},
Edit:
Also when calling axios just do it like that if you implement the above changes
this.$axios.$post("/mail/send", {
// ... the rest of your code
I'm having an issue setting the $axios base URL for my api endpoint within my Nuxt app.
I'm using the dotENV module and I have this setting in it:
BASE_URL=http://localhost:3000/api2
In my nuxt.config.js file I have:
axios: {
baseURL: process.env.BASE_URL,
},
This doesn't work for whatever reason. If I hardcode it and try:
axios: {
baseURL: 'http://localhost:3000/api2',
},
it works fine.
Anyone know why this isn't working?
I am automating some tests with Protractor but cannot figure out how to auto select a certificate for the website under test.
It seems that the AutoSelectCertificateForUrls option of Google Chrome should do the trick, but it does not seem to work, or I am not setting it correctly.
This is what I have in my conf file:
...
chromeOptions: {
prefs: {
AutoSelectCertificateForUrls: [
'{"pattern":"[*.]my.website.here","filter":{"ISSUER":{"CN":"My Issuer Here"}}}'
]
}
...
(obviously the website url pattern and cert issuer are anonymised)
I have searched around on the forums and read some other posts. However, I'm not sure how exactly to go about this. I have a store with a proxy that I'm trying to load with data from a server. I have tried both jsonp and rest for the type of proxy without luck. In both cases I get a 403 forbidden error. followed by an XMLHTTPRequest cannot load error.
Here's the error that I see in the Chrome console:
Here's my code:
Ext.define('EventsTest.store.Venues', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.proxy.Rest',
],
config: {
storeId: 'venuesStore',
model: 'EventsTest.model.Venue',
proxy: {
type: 'rest',
url: 'http://leo.web/pages/api/',
headers: {
'x-api-key': 'senchaleotestkey'
},
limitParam: false,
pageParam: false,
enablePagingParams: false
/*
extraParams: {
latitude: 45.250157,
longitude: -75.800257,
radius: 5000
}
*/
}
}
});
Security policy in browser and desktop is different so even if it fails in browser it can work in phone. But now the question is how to manage while you are developing the app, for that have a look at this similar question :
How to use json proxy to access remote services during development
Regarding that OPTION request which is getting 403 response, try setting withCredentials : false and useDefaultHeader : false. Details here
http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Operation-cfg-withCredentials
http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Connection-cfg-useDefaultHeader
I would suggest you to read more about CORS if you want to use remote services, you may choose to enable CORS on your server.
You're running your app on a local domain "sencha.test", but you're trying to access data on "leo.web" - the error is that you're trying to load data across domains, which isn't allowed via AJAX.
You say that JSONP doesn't work... why not? Does your server return valid JSONP?