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

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)
{
[...]
}

Related

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.

How to fix 404 error when communicate with API

I am using nuxt.js (frontend) and laravel6 (backend) API. Laravel app is running http://172.16.10.86:8000 port and nuxt.js app is running http://localhost:3000. I want to send data in my MySQL database using nuxt.js app. When I send POST request from my nuxt.js app it redirects properly but does not insert any data in database. Inside network tab, I found a 404 error.
methods:{
async register(){
try {
await this.$axios.post('/auth/register',this.form);
} catch(e) {
return;
}
this.$auth.login({data: this.form});
this.$router.push({name:'index'});
}
nuxt.config.js
auth: {
strategies: {
local: {
endpoints:{
login:{
url: '/auth/login',method: 'post', propertyName: 'token'
},
user:{
url:'me', method: 'get', propertyName: 'data'
},
logout:{
url:'logout', method: 'get'
}
}
}
},
axios:{
baseUrl:'http://172.16.10.86:8000/api'
},
I believe you just typo in your axios config.
It's should be baseURL not baseUrl. Please take a look at the docs.
You need to add full URL for the API server.
methods:{
async register() {
try {
await this.$axios.post('http://172.16.10.86:8000/api/auth/register', this.form);
} catch(e) {
return;
}
this.$auth.login({data: this.form});
this.$router.push({name:'index'});
}

XMLHttpRequest cannot load localhost:8080/user/fileupload. Cross origin requests are only supported for protocol schemes: http

I am trying to upload a file using angularjs.I have spring boot appication running in my local machine.I am running angularjs page using node http server.But I am getting above error.I saw some solutions like running disbale security command for chrome like this..chrome.exe --allow-file-access-from-files...did not work...some people saying run app from server.I am running it using nodejs simple http-serve.Still getting same error.Don't know where is the issue.This is my angular code....
uploadFileToUrl: function(file){
var fd = new FormData();
fd.append('file', file);
$http.post("http://localhost:8080/user/fileupload", fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function()
alert("success");
})
.error(function(){
alert("error");
});
}
This is my server code
#RequestMapping(value = "/fileupload", method = RequestMethod.POST)
public ResponseEntity<?> uploadFile(#RequestParam("file") MultipartFile uploadfile) {
try {
saveUploadedFiles(Arrays.asList(uploadfile));
} catch (IOException e) {
return new ResponseEntity(HttpStatus.BAD_REQUEST);
}
return new ResponseEntity("Successfully uploaded - "
+ uploadfile.getOriginalFilename(), new HttpHeaders(),HttpStatus.OK);
}
I am able to upload file from postman.But not for angularjs code.Anybody can tell me what i am doing wrong?

Get all public github repostories of user with javascript/node js

I want to get all public github repositories of given user from github.
I tried to make it with GET request I read from here. When i try it with curl or in the browser everything is fine, but when I run this code is gives me http 403 status code
var request = require('request');
request.get("https://api.github.com/users/:user")
.on('response', function (response) {
console.log(response.statusCode);
console.log(JSON.stringify(response));
});
I tried using this github api library, but couldn't work around the authetication
var GithubApi = require("github");
var github = new GithubApi({});
github.authenticate({
type: "oauth",
token: "GIT_TOKEN"
});
var getUsersRepos = function (user) {
github.repos.getAll({
username: user
}, function (err, res) {
res.forEach(function (element) {
console.log(`${element.name} - language: ${element.language} - issues: ${element.open_issues} - url: ${element.url}`);
}, this);
});
}
module.exports = {
getRepos: getUsersRepos
};
But when I enter my token I can get only my user information.
Any ideas what I am doing wrong or some better idea will be appreciated
The Github API requires requests to have a valid User-Agent header:
If you provide an invalid User-Agent header, you will receive a 403
Forbidden response.
Github requests that you use your GitHub username, or the name of your application, for the User-Agent header value:
var request = require('request');
options = {
url: "https://api.github.com/users/:user",
headers: {
"User-Agent": "tabula" // Your Github ID or application name
}
}
request.get(options)
.on('response', function (response) {
console.log(response.statusCode);
console.log(JSON.stringify(response));
});

AngularJS performs OPTIONS request instead of GET and got 405 Error

I send GET request to .NET Web API application from Angular but I got 405 error.
When I send same request to same address on POSTMAN, everythings looks correctly.
My api codes
public IHttpActionResult GetUsers()
{
response.error = false;
response.data = db.Users;
response.message = result.message;
return Ok(response);
}
And my Angular codes are below
service.getCategories = function (callback) {
var url = $rootScope.servicePath + "/categories";
$http({
method: 'GET',
url: url
})
.then(function successCallback(response) {
callback(response.data)
});
};
Result of request:
When I added this line to head of my controller
[EnableCors(origins: "*", headers: "*", methods: "*")]
Problem solved.

Categories

Resources