Trying to access production REST services using Axios with a Vue-Cli 3.0 dev server (#vue/cli#3.0.0-rc.10, #vue/cli-service-global#3.0.0-rc.10, quasar framework 0.17.5)
My vue.config.js:
module.exports = {
pluginOptions: {
quasar: {
theme: 'ios'
}
},
devServer: {
proxy: 'https://myProduction.server.com'
}
}
I get a 502 bad Gateway error, as listed by Chrome Dev Tool:
Request URL: http://localhost:8080/REST/getText.php
Request Method: POST
Status Code: 502 Bad Gateway
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade
I have tried the more detailed config using route key & changeOrigin: true; to no avail. What am I doing wrong?
Related
In vue.js to make Cross-Origin Resource Sharing(CORS) requests, we can configure a proxy rule in the vue.config.js file:
vue.config.js:
module.exports = {
//configure webpack-dev-server behavior
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
Considerations:
My Vue client application run on http://localhost:8080, my api server run on http://localhost:3000.
'/api': { target: 'localhost:3000' ........ }
All requests made to /api' from within my vue application will be forwarded to target: 'localhost:3000'
So if there are requests that start with /api resource path, these requests will be proxied to the target address: localhost:3000
for example:
request localhost:8080/api will be proxied to localhost:3000/api
request localhost:8080/api/1 will be proxied to localhost:3000/api/1 and so on.
pathRewrite: { '^/api': '' }
^/api is a regex.
pathRewrite matches /api path in the target address and replaces it (/api) with empty string
for example, proxied request to localhost:3000/api/1 will become localhost:3000/1
changeOrigin: true enable CORS requests
At the end, With the above proxy rule, every requests starts with /api :(localhost:8080/api, localhost:8080/api/1 ..........) will be proxied to localhost:3000, localhost:3000/1 ........
are my considerations correct??
The official documentation is not very clear.
Thanks
I am trying to put a value in Infinispan cache using Hotrod nodeJS client. The code runs fine if the server is installed locally. However, when I run the same code with Infinispan server hosted on docker container I get the following error
java.lang.SecurityException: ISPN006017: Unauthorized 'PUT' operation
try {
client = await infinispan.client({
port: 11222,
host: '127.0.0.1'
}, {
cacheName: 'testcache'
});
console.log(`Connected to cache`);
await client.put('test', 'hello 1');
await client.disconnect();
} catch (e) {
console.log(e);
await client.disconnect();
}
I have tried setting CORS Allow all option on the server as well
Need to provide custom config.yaml to docker with following configurations
endpoints:
hotrod:
auth: false
enabled: false
qop: auth
serverName: infinispan
Unfortunately the nodejs client doesn't support authentication yet. The issue to implement this is https://issues.redhat.com/projects/HRJS/issues/HRJS-36
I have a simple application with Flask and Rest-Plus on backend and VueJS frontend generated by VueCLI 3.
I am trying to set up sessions using Flask-Session but session variables saved in one request are not available in another.
I have tried lots of options but still got nothing.
Here is my vue.config.js:
module.exports = {
devServer: {
public: "localhost:8080",
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Headers": "Content-Type, Authorization, x-id, Content-Length, X-Requested-With",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
},
proxy: {
'/api*': {
// Forward frontend dev server request for /api to django dev server
target: 'http://localhost:5000/'
}
}
}
}
In my app.py I have set secret key and cors:
app.secret_key = "super_secret"
CORS(app, automatic_options=True, support_credentials=True)
Also, I have added decorators to my request handlers:
#cross_origin(supports_credentials=True)
def get(self):
And still nothing. In /login i set session['aaa']=1 and in another request i got KeyError.
I run frontend via npm run serve and backend via flask run. Any suggestions?
Solved by adding reverse proxy from flask. I've added it in my app.py so it passes all requests to frontend.
If you will use this solution while development, don't forget to remove this endpoint before deploying to production server.
#app.route('/dev', methods=['GET'])
#app.route('/js/<path:dummy>', methods=['GET'])
def proxy(dummy=None):
if request.method == 'GET':
resp = requests.get(request.base_url.replace('5000', '8080'))
excluded_headers = ['content-encoding', 'content-length', 'transfer-encoding', 'connection']
headers = [(name, value) for (name, value) in resp.raw.headers.items() if name.lower() not in excluded_headers]
response = Response(resp.content, resp.status_code, headers)
return response
After creating a new project with vue cli 3 I get this error:
GET http://192.168.1.13:8080/sockjs-node/info?t=1538257166715 net::ERR_CONNECTION_TIMED_OUT sockjs.js?9be2:1605
Operation system: Windows 10
Create vue.config.js with the following code:
module.exports = {
devServer: {
host: 'localhost'
}
};
https://cli.vuejs.org/config/#devserver
To expand on Alexey's answer...
If your frontend app and the backend API server are not running on the same host, you will need to proxy API requests to the API server during development. This is configurable via the devServer.proxy option in vue.config.js. https://cli.vuejs.org/config/#devserver
module.exports = {
devServer: {
proxy: 'http://localhost:8080'
}
}
I have a Vue.js CLI project working.
It accesses data via AJAX from localhost port 8080 served by Apache.
After I build the project and copy it to a folder served by Apache, it works fine and can access data via AJAX on that server.
However, during development, since the Vue.js CLI website is being served by Node.js which is serving on a different port (8081), I get a cross-site scripting error) and want to avoid cross-site scripting in general.
What is a way that I could emulate the data being provided, e.g. some kind of server script within the Vue.js-CLI project that would serve mock data on port 8081 for the AJAX calls during the development process, and thus avoid all cross-site scripting issues?
Addendum
In my config/index.js file, I added a proxyTable:
dev: {
env: require("./dev.env"),
port: 8081,
autoOpenBrowser: true,
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {
"/api": {
target: "http://localhost/data.php",
changeOrigin: true
}
},
And now I make my AJAX call like this:
axios({
method: 'post',
url: '/api',
data: {
smartTaskIdCode: 'activityReport',
yearMonth: '2017-09',
pathRewrite: {
"^/api": ""
}
}
But now I see in my JavaScript console:
Error: Request failed with status code 404
Addendum 2
Apparent axios has a problem with rerouting, so I tried it with vue-resource but this code is showing an error:
var data = {
smartTaskIdCode: 'pageActivityByMonth',
yearMonth: '2017-09'
}
this.$http.post('/api', data).then(response => {
this.pageStatus = 'displaying';
this.activity = response.data['activity'];
console.log(this.activity);
}, response => {
this.pageStatus = 'displaying';
console.log('there was an error');
});
The webpack template has its own documentation, and it has a chapter about API proxying during development:
http://vuejs-templates.github.io/webpack/proxy.html
If you use that, it means that you will request your data from the node server during development (and the node server will proxy< the request to your real backend), and the real backend directly in production, so you will have to use different hostnames in each environment.
For that, you can define an env variable in /config/dev.env.js & /config.prod.env.js