Vue router - How to open in new tab in production? - postgresql

I am using Vue, Vuetify and my database is in postgreSQL with an API-backend from postgREST (https://postgrest.org/en/stable/). When using the localhost and hash mode everything is fine locally. I can open the component product in a new tab when using this syntax:
const route = this.$router.resolve({ path: `/product/${value.id}` }) (1)
window.open(route.href, '_blank') (2)
However, in the production environment with postgREST-server when opening in a new tab, I get the wrong url :
http:server_name/api/#/product/1 (3)
When I remove /api from the above url (3) and rewrite it like this :
http:server_name/#/product (4)
I get the correct page.
Is it a possible nginx rule that can be written to make sure that
http:server_name/api/#/product/1 is automatically rewritten to the correct url http:server_name/#/product? or How can I change vue-router or vue config file in order to get same behavior in production as in locahost ?

A possible client-side workaround is to strip the /api prefix in production mode:
const url = process.env.NODE_ENV === 'production'
? route.href.replace('/api', '')
: route.href
window.open(url, '_blank')

Related

Nuxtjs - Error 404 with post request in production while working in local

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

WooCommerce REST API "woocommerce_rest_cannot_view "

when i paste this link
http://localhost/wordpress/wp-json/wc/v2/products?consumer_key=ck_*******************&consumer_secret=cs_********************
it show for me this error message
{"code":"woocommerce_rest_cannot_view","message":"D\u00e9sol\u00e9, vous ne pouvez pas lister les ressources.","data":{"status":401}}
by the way the cosumers key & secret are correct
Your connection must be throw https
and add this lines to your woocommerce init :
{
....
verifySsl: false,
queryStringAuth: true
}
every post request require ssl
dublicate from this link
Ionic 3 WP-REST API Post request 401 (unauthorized) error
&
WooCommerce REST API "woocommerce_rest_cannot_view "
Here are 2 possible solutions:
Add the following variable in the index.php page of your WordPress installation (Worked for me on my localhost without having to restart the server):
$_SERVER['HTTPS'] = 'on'; //------> Add this line under the line that says: define( 'WP_USE_THEMES', true );
Set the environment variable in the .htaccess file when using Apache:
SetEnv HTTPS on
401 is unauthorized error
if key and secret are correct, it could be todo with SSL
other people report similar problems
https://github.com/woocommerce/woocommerce/issues/19649
Problem solved by adding this line below to the end of .htaccess file
All you need to add this line to .htaccess , this work with me
SetEnv HTTPS on
And make sure use OAuth 1.0 for Authorization
add false in end of creating RestAPI like this...
RestAPI rest = new RestAPI(URL, ConsumerKey, ConsumerSecret, false);
it should by "authorizedHeader"
answer from https://github.com/XiaoFaye/WooCommerce.NET/issues/211
None of the suggestions helped me, so I deleted my previous API credentials and created new ones. This made the change for me.
I don't want to say "just delete your credentials" as you have to make sure to not break any necessary connections, please note that! I'm just sharing my experience on this.

Redirect a url to www with haproxy getting too many redirects

I have an haproxy that I want to reroute only one url from test.ai to www.test.ai
redirect prefix https://www.test.ai code 301 if { hdr(host) -i test.ai}
But for some reason I get the test.ai redirected you too many times.
You appear to have a redirect set somewhere else. If you're using Wordpress as a backend. You need to set your site URL and home.
define( 'WP_HOME' , 'https://test.ai');
define( 'WP_SITEURL', WP_HOME . '/');
Then you'll need to add:
if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false)
$_SERVER['HTTPS']='on';
Finally be sure this is at the bottom...
require_once(ABSPATH . 'wp-settings.php');
Otherwise, you may have a redirect or rewrite in your apache/nginx setup

Where do you set the identityserver3 endpoint urls?

Are the urls for the endpoints in identityserver3 configurable?
How come in the example for MVC the Authority is set to:
https://localhost:44319/identity
While the standalone webhost (minimal) sample has the authorization endpoint set to:
https://localhost:44333/connect/authorization
Has something been configured somewhere so that the /identity will work.
Or is the .../identity not the IDSrv3 endpoint at all, but rather only the API call instead of
https://localhost:44321/identity
which is what is called in the CallApiController... (I would change this example totally to something else with different names, so that there's a clear difference between what is part of the app (Foo and Bar) and what is part of idsrv3 (auth claims tokens and scopes) --sigh.
(end of question...)??
In any case:
When the webhost standalone minimal idsrv3 is down - I'm getting:
No connection could be made because the target machine actively refused it ... Wasn't sure what I was doing wrong, but was sure that I was doing something wrong. (Forgot to run the IDSrv3)
When its up, in both paths: (/identity and /connect/authorization)
I get 404 not found,
and if I just give the root with a trailing slash, I get: Error, The client application is unknown or is not authorized, instead of showing me the login page...
So it seems the trailing slash root is the correct way to go, which leaves me with my first question, so how/why is the Authority set in the MVC demo to include the path /identity.
IdentityServer url is configured in the startup.cs file.
In the MVC app the IdS is configured under 'webroot'/identity. In The console app IdS is running under the root of the selfhost 'webroot/'
app.Map("/identity", idsrvApp =>
{
idsrvApp.UseIdentityServer(new IdentityServerOptions
{
SiteName = "Embedded IdentityServer",
SigningCertificate = LoadCertificate(),
Factory = new IdentityServerServiceFactory()
.UseInMemoryUsers(Users.Get())
.UseInMemoryClients(Clients.Get())
.UseInMemoryScopes(Scopes.Get()),
AuthenticationOptions = new IdentityServer3.Core.Configuration.AuthenticationOptions
{
EnablePostSignOutAutoRedirect = true,
IdentityProviders = ConfigureIdentityProviders
}
});
});
The other urls you mentioned are all urls which can be resolved via the discovery document: http://'webroot'/.well-known/openid-configuration
or in case of the MVC app: http://'webroot'/identity/.well-known/openid-configuration

production build of ember app works, but when using ember serve, cookies not sent to api

I have a rest API running on localhost:8001/my_app/api/, and I have apache setup to reverse proxy it from localhost/my_app/api. That's working fine.
In order to have permissions to do anything with the api, it requires my session cookie, my csrftoken cookie and a X-CSRFToken HTTP header. I've configured adapters/application.js as follows:
adapters/application.js
import Ember from 'ember';
import DRFAdapter from './drf';
export default DRFAdapter.extend({
headers: Ember.computed(function() {
return {
'X-CSRFToken': Ember.get(document.cookie.match(/csrftoken\=([^;]*)/), '1'),
};
}).volatile(),
ajax: function(url, method, hash) {
hash = hash || {}; // hash may be undefined
hash.crossDomain = true;
hash.xhrFields = {withCredentials: true};
return this._super(url, method, hash);
}
});
If I do a ember build -prod and copy the contents of the dist dir to /var/www/myApp/, apache serves my app, and it works just fine.
It's when I try to use ember-cli's builtin development server where I run into problems. I'm getting 403 errors from my api. It turns out that while the X-CSRFToken header is being sent neither of my cookies are. If I look in my chrome developer tools, it shows that I have both cookies - they simply aren't in the request headers. They're both from localhost, so I'm a bit confused.
Also, I currently I have CORS on my rest backend setup. Here are the headers I'm currently receiving:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:4200
I thought that since allow-credentials == true and allow-origin != * that cookies were supposed to be allowed. sigh.
Here's my API_HOST and contentSecurityPolicy:
config/environment.js
if (environment === 'development') {
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.API_HOST = "http://localhost"
ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' localhost",
'font-src': "'self'",
'connect-src': "'self' localhost",
'img-src': "'self'",
'style-src': "'self'",
'media-src': "'self'"
};
}
As you can see above, the api requests are being sent through my reverse proxy. I've played around with ember serve --proxy trying both http://localhost:80/ and http://localhost:8001/ but neither have helped. I've also tried setting my development ENV.API_HOST = 'http://localhost:8001/'; with and without the various proxy values.
This edit, build, deploy, refresh my browser, test, & repeat process is REALLY slow and getting old REALLY fast.
Could someone please explain to me how to get the ember-cli development server to properly access my rest api?