Open JohnReyes-Dev opened 3 years ago
@RukaiJohn Can you provide a list of specific steps to follow in order to reproduce the errors that you are seeing?
This should include anything I have to run against my local mysql
server to set up a user, and, especially, the actions taken within the browser, and any JavaScript that runs client-side.
How i created the mysql table.
CREATE TABLE jobs
.user
(
id
INT NOT NULL AUTO_INCREMENT,
email
VARCHAR(45) NOT NULL,
PRIMARY KEY (id
));
Step #1: Front end I'm using Vue for the login. So 'http//localhost:8080/login' so I can authenticate/create a token for the user. The action is taken place in http://localhost:5000/login. After that http://localhost:5000/get can be accessed and it can show the json data from the database.
<template>
<form style="width: 75%; max-width: 700px; margin-left: auto; margin-right: auto;"
action="http://localhost:5000/login" method="POST">
<p class="h4 text-center mb-4">Sign in</p>
<label for="defaultFormLoginEmailEx" class="grey-text">Your email</label>
<input type="email" id="defaultFormLoginEmailEx" class="form-control" name="email"/>
<br />
<label for="defaultFormLoginPasswordEx" class="grey-text">Your password</label>
<input type="password" id="defaultFormLoginPasswordEx" class="form-control" name="password"/>
<div class="text-center mt-4">
<button class="btn btn-indigo" type="submit">Login</button>
</div>
</form>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
Step #2
Since I wasn't successful using axios in the front end. I decided to do it in the backend like this. But it gave my the same 403 error when I tried to get the data from http://localhost:5000/get
app.get("/", authenticateToken, (req, res) => {
jwt.verify(req.token, 'secretpassword', async (err) => {
if (err) {
res.sendStatus(403);
} else {
let response = await axios.get('http://localhost:5000/' +'get', {
withCredentials: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Authorization': `Bearer
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjAwOTIyMTQ0LCJleHAiOjE2MDg2OTgxNDR9.aRsw-
jEQJ-7mlO10nBKA5VT3IL7P0b9T9K0C8aT8sUs`
}
});
res.send(response.data);
}
});
});
*****If I'm not making much sense, I can give you access to my project in github and you can take a look at it if you have time.
I would want to try to figure out the issue using the code you have provided. If I address it using access to your repo, then someone else finding this Issue in the future would not be able to follow along.
Unfortunately, I probably won't be able to look in more detail for at least a few more days, but here are some thoughts that might assist with debugging:
axios.get
with Access-Control-Allow-Origin: *
as a request header. Access-Control-Allow-Origin is a response header.
I'm not sure if this is the right place to ask this question, but...
What I'm trying to do is get json data from "/get" to "/", but I'm not sure why axios keeps giving my a 403 error. From what I read, axios isn't the issue, but cors is. I tried all the ways that people are recommending, but nothing is working. What I'm I doing wrong within my code? I'm also seeing "Referrer Policy: strict-origin-when-cross-origin" in the Header, but I'm not sure if that's what's causing this issue.