Develop Reference

Can't fetch from js after deployment to IIS - 404 not found

i try to make http post request to my controller from the js. In localhost everything works perfectly, but when I deploy app on IIS, then fetch cut some part of path and return 404 not found.
Application is deploy on: https://example.com/ApplicationName/
Fetch url is: https://example.com/Home/Update/?switcher=false
But should be: https://example.com/ApplicationName/Home/Update/?switcher=false
Fetch:
let url = '/Home/Update/?switcher=' + switcher;
await fetch(url, {
method: 'POST'
})
.then(function (response) {
if (response) {
toggleChatSwitch.disabled = false;
}
});
Controller:
[HttpPost]
public bool Update(bool switcher)
{
[...]
}

Forwarding multipart/form-data using NextJS api

I am having a bit of trouble forwarding multipart/form-data using NextJS api.
async function proxy(req: NextApiRequest, res: NextApiResponse): Promise<void> {
const { body, headers, method, url } = req;
// Doing some work to handle authentication
const rewriteUrl = url?.replace('/api/proxy', '');
const config: AxiosRequestConfig = {
url: rewriteUrl,
method: method as Method,
headers: {
cookie: '',
Authorization: token,
},
data: body,
};
try {
const { data: originalData, status } = await axiosInstance(config);
return res.status(status).json(originalData);
} catch (err) {
return res.status(err.status).json(err);
}
}
export default proxy;
When calling the API directly or using non multipart/form-data network calls, no problem whatsoever. However, when proxying a multipart/form-data, I am receiving 413 Payload Too Large
I am have been trying to use
export const config = {
api: {
bodyParser: false,
},
};
but in that case the backend API is responding with 400 telling that the file doesn't exist.
As am I adding an authentication header before forwarding the request, can this be the culprit as the content size change?

Using Express as a proxy server with React.js returning 404

I am trying to make request to a third party api from express, i want express to serve as a proxy, and send the result to the front end. the problem is that the route on the frontend has qyeries and parameters, this is my code
app.get("/api/posts/:id", function (req, res) {
request(
"https://api.xxxx.com/yyyy/1897970/user",
{
headers: {
Authorization: API_KEY,
"Content-Type": "application/json",
},
},
function (error, response, body) {
const per_page = req.query.per_page;
const page = req.query.page;
const query = req.query.query;
const id=req.params.id;
if (!response.body) {
console.log(error);
} else {
res.send({
body,
id,
"per-page": per_page,
page: page,
query: query
});
}
}
);
});
On the front end, i have to make request to a route like
axios
.get(
`/api/posts/{id}/query?per_page=10&page=${title}`)
.then((res) => {
}).catch((err)=>{console.log (err) })
The problem is that it returns an error 404, it cannot get the data, please what am i doing wrong?

The URL in the get is not a full URL. change it to the full URL of your backend, if you are in localhost so localhost.

Add proxy to the package.json in react client to fetch the data from the backend
"proxy": "http://localhost:3000",
the proxy should be the port on which the backend is running.

NuxtJs login works but unauthorized 401

I am using NuxtJs auth module to handle my authorization in the state. For the auth I wrote an express api which works.
I have following configuration in my nuxt.config.js:
axios: {
baseURL: 'http://localhost:4000/api'
},
auth: {
strategies: {
local: {
endpoints: {
login: { url: '/users/login', method: 'post', propertyName: 'data.token' },
user: { url: '/users/me', method: 'get', propertyName: 'data' },
},
}
}
},
And in my login component I call the login route like this:
const { data } = await this.$auth.loginWith('local', {
data: this.login
})
This call the /api/users/login route successfully (200) and after that calls the /api/users/me with an error saying
xhr.js:178 GET http://localhost:4000/api/users/me 401 (Unauthorized)
In postman I am calling the api route which returns the user like this*
> Get - localhost:4000/api/users/me
>
> Authorization:
>
> Type: Bearer Token Token: xxxx
Which returns the users data.
I read that nuxt auth module default the type to 'Bearer' but in my case it does not work.
The user login work but the second route which returns the user data does not work due to authorization. The Api is not inside the nuxtjs it is a different project written in Express.

You can try this:
axios: {
baseURL: 'http://localhost:4000/api' },
auth: {
strategies: {
local: {
endpoints: {
login: { url: '/users/login', method: 'post', propertyName: 'data.token' },
user: { url: '/users/me', method: 'get', propertyName: 'data' },
},
tokenType: ''
}
}
},
Setting tokenType to an empty string overrides the default "Bearer". Some server configurations may throw a 401.

How do I make a post request from a react front-end to a node back-end? Getting 404

I'm trying to make a simple website where users can post things to learn the MEAN stack. When I'm handling the POST request, which will be handled and inputed to the MongoDB server through the back-end. React is on port 3000, and the server is on 5000. How do I make the request go from 3000 to 5000? My request works through Postman but not using axios. I added the proxy to the client-side package.json.
I've tried changing the proxy, adding CORS, changing to every single possible route. Nothing works.
Back-end:
router.post('/api/req',(req,res)=>{
const newPost = new Post({
title: req.body.title,
description: req.body.description
})
newPost.save().then(()=>{
console.log('Item added to database!')
});
})
Front-end:
axios({
method: 'post',
url: '/api/req',
data: {
title: this.state.title
},
validateStatus: (status) => {
return true;
},
}).catch(error => {
console.log(error);
}).then(response => {
console.log(response);
});
"proxy": "http://localhost:5000/" - package.json
I'm expecting the POST request to go through, and for the title to be inputed into the database. Instead, I get the error: Failed to load resource: the server responded with a status of 404 (Not Found)
The error is coming from localhost:3000/api/req, and it should be proxying port 5000. Also, the actual route is routes/api/req.js.

You will have to pass the complete url:
axios({
method: 'post',
url: 'http://example.com:5000/api/req',
data: {
title: this.state.title
},
validateStatus: (status) => {
return true;
},
}).catch(error => {
console.log(error);
}).then(response => {
console.log(response);
});