I'm working on a Vue 2 application and am using Vue-cli version 5.0.6. I have to convert it to HTTPS. Going through the internet, I found this solution.
After implementing the solution, my vue.config.js file looks like this:
const fs = require('fs');
const { defineConfig } = require('#vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
allowedHosts: 'auto',
https: {
key: fs.readFileSync('./certs/example.com+5-key.pem'),
cert: fs.readFileSync('./certs/example.com+5.pem'),
}
}
});
But, the end of the solution says to add public: 'https://localhost:8080/' also.
I've tried adding this, but on running the application, it gives the following error:
When I remove this public: 'https://localhost:8080/' line, then the console does not give an error. But then, in the browser's console, a WebSocket connection failed error shows again and again. Also, if I use my local ip instead of localhost in the browser, then the following is shown on the browser:
I want to know the reason for these errors. Plus, if there's a better solution.
Thanks
Related
I'm trying to set up Sveltekit, Supabase and Vercel.
It works correctly on a local environment (SvelteKit and Supabase), but when I deploy it to Vercel there is a problem with Supabase - "Error: supabaseUrl is required" (I post a screenshot below).
If I don't use Supabase, there are no problems with deploying to Vercel.
Please someone if you have encountered a similar one or have a suggestion to share.
I finally got this to work after doing a couple of things I pieced together from a few sources.
First, I added the the environment variables in Vercel just as the were in the .env file. For example, VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY along with their values.
Next, I added some code in the svelte.config.js file. The result of the file looks like this:
import adapter from '#sveltejs/adapter-auto'
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
vite: {
define: {
'process.env': process.env,
},
},
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
},
}
export default config
I redeployed the project at Vercel, and it worked.
You should add your Supabase URL and Supabase ANON KEY to vercel and stick to the format given below VITE_SUPABASE_URL,VITE_SUPABASE_ANON_KEY if you have initialized according to the supabase guide.
More than adding the configuration to your svelte.config.js file, you should emphasize on adding environment variables to your Vercel environment if you have added this file
// utils/supabase.js
import { createClient } from '#supabase/supabase-js'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
I am running tests and receive unnecessary console.info texts in terminal, I would like to get rid of:
console.info
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
at node_modules/vue/dist/vue.common.dev.js:9051:47
console.info
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
at node_modules/vue/dist/vue.common.dev.js:9060:45
const { Nuxt } = require('nuxt')
const nuxtConfig = require('../../../../nuxt.config.js')
let nuxt = null
beforeAll(async () => {
nuxt = new Nuxt({
...nuxtConfig,
buildDir: constants.buildDir
})
await nuxt.server.listen(constants.port, 'localhost')
}, 300000)
I've tried to put vue.config silent property in various places in code above, but also into nuxt.config.js, but I got no luck doing so. I've tried this snippet: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-vue-config/
export default {
vue: {
config: {
productionTip: true,
devtools: false
}
}
}
How to turn off console.info messages?
You could right click on the message in your devtools console and go with Hide messages from vue.runtime.esm.js. It will hide it from your console thanks to a filter. Do not solves the real problem, but a nice and quick fix.
Pretty much as here: https://superuser.com/a/995289/850722
I'm setting up a simple React Native learning app for several students on Expo, that also talks to an API server the student is learning to code.
The student's API server is run via node server.js, and serves on localhost:3000 on the student's machine. It has nothing to do with expo.
I want students to be able to run their app via any of expo start --android, expo start --ios, or expo start --web, on the same machine that runs their API server. Each student runs from home on a different home wifi network, and doesn't necessarily know the ins and outs of ip addresses or networking.
When using expo start --web, we get CORS exceptions, unless we use the custom webpack.config.js work around (first create webpack.config.js via https://docs.expo.io/guides/customizing-webpack/, then put this in webpack.config.js):
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function(env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
if (config.mode === 'development') {
config.devServer.proxy = {
'/**': {
target: {
host: 'localhost',
protocol: 'http:',
port: 3000,
},
secure: false,
changeOrigin: true,
logLevel: 'info',
},
};
}
return config;
};
This is great, because we can make api calls to ./end/point without knowing the student's ip address, and the webpack devServer launched by expo-cli effectively proxies around to http://localhost:3000/end/point on the student's development machine.
Meanwhile, for iOS and Android, I've found this snippet:
import Constants from "expo-constants";
const { manifest } = Constants;
const SERVER_URL = "http://"+manifest.debuggerHost.split(`:`).shift().concat(`:3000`)+"/";
and then using SERVER_URL when using fetch().
But, we're missing a unified solution that works agnostic of which environment we're in (web, ios, or android). The webpack proxy only appears to be on and work when using the expo web client (expo-cli doesn't launch webpack for ios or android), and the 2nd option (A) doesn't work out of the box on web and (B) would trigger a CORS exception anyway.
How can I elegantly write one bit of code, or otherwise set up the project for the students, so that (A) they don't need to know their dev machine's ip address, or what that means and (B) it will work regardless of whether they're in the web, android, or ios expo client?
Don't like this as an answer and would prefer someone who knows better to point out better, but this is what I ended up using that seems to work, at least in development:
// Some chatter that Contants.manifest needs to come from a different package?
import Constants from "expo-constants";
const { manifest } = Constants;
const SERVER_URL = (() => {
// TODO - put a "prod" api server somewhere
// Android / IOS - no CORS issue.
if (!!manifest.debuggerHost) {
return "http://"+manifest.debuggerHost.split(`:`).shift().concat(`:3000/`);
}
// Expo Web client, making use of webpack.config.js (see original question) for devServer proxy.
else {
return "./";
}
})();
...
fetch(SERVER_URL + 'some_endpoint/').then(...)
I'm working on a VueJS app, and I want to use the Yahoo! Shopping API (documentation: https://developer.yahoo.co.jp/webapi/shopping/shopping/v1/itemsearch.html) to fetch products using their barcode. However, I keep getting a CORS error and I'm not sure why, or what I can do to make it work. My code is as follows:
data() {
return {
appId: 'dj00aiZpPUQ4RTBUUTVSNUs3TyZzPWNvbnN1bWVyc2VjcmV0Jng9NTI-',
apiUrl: 'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch'
}
}
...
axios.get(this.apiUrl, {
params: {
appid: this.appId,
jan: 4589707054951
}
})
.then((response) => {
console.log(response);
})
.catch((error) => {
alert(error)
})
The specific error I get is this:
Access to XMLHttpRequest at
'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch?appid=dj00aiZpPUQ4RTBUUTVSNUs3TyZzPWNvbnN1bWVyc2VjcmV0Jng9NTI-&jan=4589707054951'
from origin 'https://0.0.0.0:8080' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
What can I do to make this work? So far the only way it works is using the CORS Chrome extension, but that's naturally just for testing.
Thanks a lot.
The server/api owner needs to send this in his response header:
Or if you have a server settings panel or something, make sure to add the domain from where you are making the request.
Access-Control-Allow-Origin: 'your-domain-here'.
Please read more at: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
I got the same error. I solved it in the following manner.
This error occurs because we are tryign to access the data hosted on a different server. CORS issue is a browser issue where a certain browser does allow you to access the contents hosted on a different or a virtual server. If you observe the app that you are running on is on the local-host (https://0.0.0.0:8080) and trying to access the data hosted on https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch. You can solve this problem simply by adding in a few lines of code in your vue application.
Step 1:
Create a new file called vue.config.js in your root directory of the vue application, that is beside your package.json file. Add the following code in your vue.config.js file:
module.exports = {
devServer:{
proxy: "https://shopping.yahooapis.jp"
}
}
Note: https://shopping.yahooapis.jp would be your base url.
Step 2:
Now, go back to your code in data(). Replace the domain name/base url of the apiUrl with https://0.0.0.0:8080. that is now your apiUrl would be https://0.0.0.0:8080/ShoppingWebService/V1/json/itemSearch.
data() {
return {
appId: 'dj00aiZpPUQ4RTBUUTVSNUs3TyZzPWNvbnN1bWVyc2VjcmV0Jng9NTI-',
apiUrl: 'https://0.0.0.0:8080/ShoppingWebService/V1/json/itemSearch'
}
}
Step 3:
Restart your application. Eg, npm run serve.
I found another solution which worked without creating a proxy server or a mock server. You can disable the security settings for accessing cross origin apis on your web browser.
You can disable the CHROME security settings for accessing apis out of the origin by typing the below command on the terminal:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security
After running the above command on your terminal, a new chrome window with security settings disabled will open up. Now, run your program (npm run serve / npm run dev) again and this time you will not get any CORS error and would be able to GET request using axios.
Hope this helps!
I have recently started working with a new stack of technologies and need some help.
I'm working on an existing parse.com app. The guys have been using Sublime 2.
I'm trying to get the app running on WebStorm. After doing some research and trying a couple of things I still can't run it locally.
I have created a new Node.js Express app using WebStorm and that works beautifully, so I'm assuming my environment (WIN10) is set up correctly.
I had to create an package.json for it and change some libraries around like bodyParser (it was using Parse.BodyParser, which is deprecated AFAIK)
I installed all packages/plugins using npm, and WebStorm is no longer complaining about missing references ect..
Here is the first lines:
var express = require('express');
var parseExpressHttpsRedirect = require('parse-express-https-redirect');
var parseExpressCookieSession = require('parse-express-cookie-session');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var app = express();
app.set('views', 'cloud/views');
app.set('view engine', 'ejs');
app.use(parseExpressHttpsRedirect()); // Require user to be on HTTPS.
app.use(bodyParser);
app.use(cookieParser('SecretCodeHere'));
app.use(parseExpressCookieSession({
cookie: {
maxAge: 86400000
}
}));
And then we have this gem at the end of the file:
app.listen();
Now I'm assuming that this works because this gets deployed to parse.com and it does some Magic to host it.
Now the app starts when I run it but I cant connect to it.
I've tried the following:
Connecting to https://localhost:63342/ProjectName/ (this is the default behavior AFAIK) after running gives me 404 Not Found Index file doesn't exist.
Changing the code to :
app.listen(3000, function () {
console.log('App listening on port 3000!');
});
That gives me localhost unexpectedly closed the connection. ERR_CONNECTION_CLOSED
Is there anything else I can try?
If you want to host the server on port 3000, you would need to import the http module
import http = require('http');
http.createServer(app).listen(3000, function () {
console.log('Express server listening on port 3000'));
});