I opened the console on my browser, and I found an error message how to resolve cross on vue js?
I created a file called vue.config.js
and this , but not work
module.exports = {
devServer: {
proxy: 'http://localhost:8080/',
}
}
I run my web on localhost
'http://localhost:8080/'
How to deal with this?
It looks like it has something to do with WebSockets.
Can you try this syntax?
proxy: { '/': { target: 'http://localhost:8080', ws: true }, }
More info here.
Maybe check out this question tho (WebSockets!).
Related
I am trying to make call from vuejs project to adonis js using proxy. My vue.config.js file is as bellow:
devServer: {
proxy: {
'^/api': {
target: 'http://127.0.0.1:3333',
secure: false,
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
},
logLevel: 'debug',
headers: {
Connection: 'keep-alive'
},
}
}
},
This configuration is working when I am trying to login with wrong credential, then backend adonis project is returning properly. But when I am trying with correct credentials, It throws this message:
Proxy error: Could not proxy request /api/admin/login from
localhost:8080 to http://127.0.0.1:3333. See
https://nodejs.org/api/errors.html#errors_common_system_errors for
more information (ECONNRESET).
I have tried in many different ways by changing proxy configuration, but it is not solved yet. If need any more information, feel free to ask.
I am running a VUE 3 CLI project on localhost
There is a remote server I need to call for data. Browsers were blocking this CORS so I had to learn how to set up correct api headers and a proxy in the vue config.
My vue.config.js file contains this:
devServer: {
https: true,
proxy: {
'^/api': {
target: 'https://api.mysite.com/',
ws: true,
changeOrigin: true
}
}
},
This resolved my CORS block from local host to the remote server but caused the problem in the title. It now thinks that the call to the sockjs-node file is cross origin.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://192.168.29.243:8080/sockjs-node/info?t=1615826901010. (Reason: CORS request did not succeed).
I can't seem to find any reason for this or a solution. Has anyone run into this and knows what to do?
This fixed it for me.
Please check following link: How can I fix these SockJS ssl errors?
// vue.config.js
module.exports = {
devServer: {
proxy: {
"^/api": {
target: "https://localhost:44345",
ws: true,
changeOrigin: true,
},
},
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",
},
public: "http://localhost:44345",
disableHostCheck: true,
},
};
I have a Nuxt project. Everything is OK when I generate a static page.
However, I need to send a POST request to the other server.
I tried to use both a proxy in nuxt.config.js and just direct query, but after deploy to the ngnix eventually, nothing works.
Please help.
UPDATE. Steps to reproduce.
Create Nuxt App including axios and proxy
Configure your proxy for other webservice:
proxy: {
'/api': {
target: 'http://example.com:9000',
pathRewrite: {
'^/api': '/',
},
},
changeOrigin: true,
},
call this service somewhere in the code:
const result = await this.$axios.post('/api/email/subscribe', {email: email})
run "yarn dev" and test the service. It works locally properly.
run 'nuxt generate' and deploy the static code hosting service, for example, hosting.com
run your page which calls the above-mentioned service.
As a result, instead of making POST call to the hosting.com/api/email/subscribe, it calls localhost:3000/api/email/subscribe.
Be sure to install the nuxt versions of axios and proxy in your project #nuxt/axios and #nuxtjs/proxy
after that in your nuxt.config.js add axios as module plus this options for axios and proxy:
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
//more modules if you need
],
/*
** Axios module configuration
*/
axios: {
proxy: true,
// See https://github.com/nuxt-community/axios-module#options
},
proxy: {
'/api/': {
target: process.env.AXIOS_SERVER, // I use .env files for the variables
pathRewrite: { '^/api/': '' }, //this should be your bug
},
},
now you can use axios in any part of the code like this
const result = await this.$axios.post('/api/email/subscribe', {email: email})
it will internally resolve to AXIOS_SERVER/email/subscribe without cause cors issues.
EXTRA: test enviroments in local using multiples .env files
you can configure .env for dev and .env.prod for production, after that in local you can use yarn build && yarn start for test your app with your production enviroment. You only need add this at the top of your nuxt.config.js file
const fs = require('fs')
const path = require('path')
if (process.env.NODE_ENV === 'production' && fs.existsSync('.env.prod')) {
require('dotenv').config({ path: path.join(__dirname, `.env.prod`) })
} else {
require('dotenv').config()
}
By definition on the Nuxt docs page what nuxt generate does is: Build the application and generate every route as a HTML file (used for static hosting).
Therefore, using proxy is out of question here. Take note that you path is not even being rewritten.
And probably the result you're looking for is not hosting.com/api/email/subscribe (wit /api), but hosting.com/email/subscribe.
Nevertheless, if you use nginx then I don't think you should use Nuxt's proxy option. Nginx is built just for that so point your API calls there and in nginx config file just declare where it should point further.
I created a project using #vue/cli 3 and attempted to add the autoOpenBrowser option and received the following error. So, I gather that this option is no longer available?
ERROR WebpackDevServerOptionsValidationError: Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'autoOpenBrowser'. These properties are valid:
object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, logLevel?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, before?, after?, stats?, reporter?, logTime?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }
module.exports = {
devServer: {
port: 4020,
autoOpenBrowser: true
}
}
Create vue.config.js file at root level and add your code in this file. Running the command npm run serve will automatically open your application in browser.
module.exports = {
devServer: {
port: 8080,
open: true
}
}
Duh, it was the open option... I was confusing the config/index.js file with webpack.config.js.
module.exports = {
devServer: {
port: 4020,
open: true
}
}
I am trying to use grunt-contrib-watch together with grunt-express-server to reload my express server and the browser page whenever I made changes to the javascript files. The problem I am having is that the page reloads before the server is ready, so I get a "can't establish a connection to the server at localhost:3000."
Here is my Gruntfile.js:
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
express: {
dev: {
options: {
script: 'gui-resources/scripts/js/server.js'
}
}
},
watch: {
express: {
files: ['gui-resources/scripts/js/**/*.js'],
tasks: ['express:dev'],
options: {
livereload: true,
spawn: false
}
}
}
});
// Load all grunt tasks declared in package.json
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', ['express:dev', 'watch'])
};
In my server.js file I start the server with:
var port = 3000;
app.listen(port, function() {
console.log('Listening on port %d', port);
});
I found this similar question, but the solution proposed there doesn't apply on my case, since I am logging some output when the server is started, but the race condition appears anyway.
Update:
If I remove 'spawn: false' from watch:express config, everything works but express logs an error when started:
Error: listen EADDRINUSE
at errnoException (net.js:878:11)
at Server._listen2 (net.js:1016:14)
at listen (net.js:1038:10)
at Server.listen (net.js:1104:5)
at Function.app.listen (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/express/lib/application.js:533:24)
at /Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/gui-resources/scripts/js/server.js:86:13
at Object.context.execCb (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:1890:33)
at Object.Module.check (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:1106:51)
at Object.<anonymous> (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:1353:34)
at /Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:372:23
Strange enough, in spite of the error the server and the page reload correctly.
Here is my code (the real Gruntfile is bigger, but I removed the parts not related to watch or express to make the question more readable).
I think you should be able to use the debounceDelay option with livereload to wait a bit longer until your server is ready:
watch: {
express: {
files: ['gui-resources/scripts/js/**/*.js'],
tasks: ['express:dev'],
options: {
livereload: true,
spawn: false,
debounceDelay: 1000 // in milliseconds
}
}
}