I'm attempting to run integration tests via grunt-contrib-qunit. I've set the --proxy flag via the options object, every ajax request returns a 404 (not found) error.
Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-qunit');
...
grunt.initConfig({
qunit: {
options: {
'--local-to-remote-url-access': true,
'--proxy': '192.168.1.1:8080'
},
all: [
'test/**/*.html'
]
},
...
});
...
grunt.registerTask('test', [
'clean:server',
'compass',
'connect:test',
'qunit:all'
]);
The QUnit test itself fails with a 404 on the most trivial AJAX request:
test/index.html
test('Works', function() {
stop();
$.ajax({
url: '/svc/version',
success: function() {
ok(true, 'yippee');
start();
},
error: function(xhr) {
console.log('Error: ' + xhr.status);
}
});
});
Fails with:
Running "qunit:all" (qunit) task
Testing test/index.htmlError: 404
It's worth noting that explicitly referencing the host (url: 'http://192.168.1.1:8080/svc/version') works fine, so it's not a same-origin issue.
References: grunt-contrib-qunit, PhantomJS, grunt-lib-phantomjs, SO "Proxy in PhantomJS"
Related
My environment
front - windows, port 3000
backend - linux (ubuntu) in docker container, port 5000
Vue(front) tsconfig.json
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
server: {
host: true,
port: 3000,
proxy: {
"/api": {
target: "http://127.0.0.1:5000",
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
front api call code
const response = await axios.post("http://127.0.0.1:5000/users/login?email=" + code);
backend(Nestjs) - main.ts
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors({
origin: 'http://localhost:3000',
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
credentials: true,
});
await app.listen(5000);
}
bootstrap();
I expect the api call to go to the backend, localhost:5000
but i get a 404 error
When I tried with postman, I got normal return, but when I sent the request using axios in Vue with the same request, I got 404 not found.
The most incomprehensible thing is that with the current settings, it was normally requested when developing in the past.
I don't know how to fix this
please help a lot
Repositories currently being edited: https://github.com/PracticeofEno/ft_transcendence
thanks
omg... I send POST message..
But api is GET Message
The below code is working fine locally on chrome and firefox without installing the cors plugin. However, when I create a build and place a static file to a production server droplet at /var/www/html It's not working. Please let me know how to change this config file for production and I don't get cors error as well. like not getting cors or any error locally.
This is my vue.config.js file:
module.exports = {
devServer: {
proxy: {
"/one": {
target: "https://etherscan.io/",
pathRewrite: { "^/one": "" },
},
"/two": {
target: "https://bscscan.com/",
pathRewrite: { "^/two": "" },
},
},
},
};
Moreover, This is the request:
this.$http
.get("http://localhost:8080/one/token/" + this.contractAddress, {
mode: "no-cors",
header: {
"Access-Control-Allow-Origin": "http://localhost:8080/",
},
gzip: true,
})
The second request in the same component is:
this.$http
.get("http://localhost:8080/two/token/" + this.contractAddress, {
mode: "no-cors",
header: {
"Access-Control-Allow-Origin": "http://localhost:8080/",
},
gzip: true,
})
Error after deployment, when I open deployed app by IP address:
Then I tried to replace http://localhost:8080 to http//:localhost in URL and at access control allow origin I placed http://ip or server/ Then Error
I'm running an Angular Universal application that is talking to an API. Now I'm trying to set up a proxy in the Universal server that proxies API requests to the actual API server:
server.use(['/api', '/sitemap.txt'], createProxyMiddleware({
target: process.env.API_URL,
onProxyReq: req => {
console.log('Using origin: ' + getOrigin(req.getHeaders()));
req.setHeader('origin', getOrigin(req.getHeaders()));
},
pathRewrite: {'^/api': ''}
}));
This works perfectly when running locally, but when running it on the server (Azure WebApp), it doesn't work. I can see the console log being called in the WebApp logs, but the resulting document is the Angular application with a message "page not found".
I'm totally out of ideas on where to look for solutions.
Edit:
I tried another proxy middleware and it does do the trick. This code works both locally and on Azure.
import * as proxy from 'express-http-proxy';
// ...
server.use(['/api', '/sitemap.txt'], proxy(process.env.API_URL, {
proxyPathResolver: req => {
let url: string = req.url;
if (url.startsWith('/api')) {
url = url.substr(4);
}
return url;
},
proxyReqOptDecorator(proxyReqOpts, srcReq) {
proxyReqOpts.headers['origin'] = getOrigin(proxyReqOpts.headers);
return proxyReqOpts;
}
}));
But it has some other limitations that make it unusable for our project, so I still need this resolved.
I have it working correctly now. This is the current setup:
server.use(
'/api',
createProxyMiddleware({
target: process.env.API_URL,
changeOrigin: true,
headers: {
Connection: 'keep-alive',
},
onProxyReq: (proxyReq, req, _res) => {
proxyReq.setHeader('origin', getOrigin(req.headers));
},
pathRewrite: {
'^/api': '',
},
})
);
So I added changeOrigin and the keep-alive header. I'm not sure which of the two resolved the issue, once I got it to work I never bothered to check it out. I suspect it's the header, though.
I want to use proxyTable with axios in my vue-cli project.
In my config/index.js, I put code like this:
proxyTable: {
'/getnews': {
target: 'https://xx.xxx.xx.x'
changeOrigin: true,
secure: false,
pathRewrite: {
'^/getnews': '/getnews'
}
}
}
and in my request function, it goes like this:
var url = '/getnews';
this.$axios({
methods: 'get',
url: url,
})
.then(response => {
console.log(response);
})
Now here comes the question, my browser console tells me that
xhr.js?ec6c:178 GET http://localhost:8080/getnews 504 (Gateway Timeout)
and the terminal says:
Error occurred while trying to proxy request /getnews from localhost:8080 to https://xx.xxx.xx.x (ECONNREFUSED)
so it looks like the proxy doesn't work out, my request still goes to my localhost. Anyone knows how to fix that?
I finally figure out with the help of my friend.
It's the lack of port number that causing the problem. The code should be like this:
proxyTable: {
'/getnews': {
target: 'https://xx.xxx.xx.x:8080'
changeOrigin: true,
secure: false,
pathRewrite: {
'^/getnews': '/getnews'
}
}
}
Then it works just fine.
The code is on github
The following example API Proxying During development
gives an example of a proxyTable
// config/index.js
module.exports = {
// ...
dev: {
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
under which they say,
The above example will proxy the request /api/posts/1 to http://jsonplaceholder.typicode.com/posts/1.
but clearly posts/1 is missing from the example.
Or should the /posts/1 be in the proxyTable or in the .vue file using axios like this,
axios.get("api/posts/1")
so that a HTTP GET request which starts with api with proxy to http://jsonplaceholder.typicode.com and then append the rest of that url, which in this case is /posts/1 and so it actually proxies to http://jsonplaceholder.typicode.com/posts/1
Is this correct?
----------EDIT FROM HERE DOWN------------
In my own case
// config/index.js
module.exports = {
// ...
dev: {
proxyTable: {
// proxy all requests starting with /conn to http://localhost:8081
'/conn': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/conn': ''
}
}
}
}
}
and
axios.get("/conn/api.php?action=read")
should proxy to,
http://localhost:8081/api.php?action=read
But I get a console error,
GET http://localhost:8080/conn/api.php?action=read 504 (Gateway Timeout)
Thanks