VueJs Axios - Request headers - javascript

Edit: Could this be a CORS issue, I'm on localhost...
In Javascript I can set the request headers and get and return a response like so:
$(function() {
var params = {
// Request parameters
};
$.ajax({
url: "https://demo-api.com/",
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{API KEY}");
},
type: "GET",
// Request body
data: "{body}",
})
.done(function(data) {
alert("success");
})
.fail(function() {
alert("error");
});
});
Question:
I want to learn VueJs and would like replicate this with VueJs + Axios, however I am confused as to how to set the request headers as I have in the above JS.
Here is my failed attempt:
new Vue({
el: '#app',
data () {
return {
info: null,
loading: true,
errored: false,
response: false
}
},
mounted () {
axios({
method: 'get',
url: 'https://demo-api.com/',
headers: {
'Ocp-Apim-Subscription-Key': 'API KEY',
}
})
.then(response => {
console.log(response)
this.response = true
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
})
How can I specifically set the request headers as I have in the above JS. I am wanting to learn how to implement the below in Vue/Axios.
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{API KEY}");
Thanks.

Difference between the created and mounted events in Vue.js
Read an answer and try to use created() lifecycle hooks instead of mounted()
Furthermore, you can create separate instance of axios for request with this header and then use it inn you code:
axios-demo-api.js
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://demo-api.com',
headers: {'Ocp-Apim-Subscription-Key': 'API KEY'} //don't forget to change API key to your exact key
})
export default instance
Usage:
import axiosInstance from 'axios-demo-api';
export default {
created() {
axiosInstance.get('/{demoId}?' + $.param(params))
.then(response => {
console.log(response)
this.response = true
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
}

Your problem is not the header. You are setting it properly. It has to do with the URL. You are constructing your URL like this:
url: 'https://demo-api.com/{demoId}?" + $.param(params)',
Your URL string is wrong. It has an extra quote at the end. That's why you got 404 error. This is what you need to do:
url: "https://demo-api.com/{demoId}?" + $.param(params),
Also, if you are using Vue and not jQuery, then you should not use $.param function. Instead, use a proper query string module like qs. So your actual URL would be like:
url: `https://demo-api.com/${demoId}?${qs.stringify(params)}`,
Here we are using ES2015 string interpolation.

Related

cannot get XSRF-TOKEN from cookie in nextjs (Reactjs)

I create a login form using Nextjs and backend with Laravel 8, I generate an XSRF-TOKEN in Laravel then set it on cookie, I can see the token inside inspect element> application tab> cookie section, but I can't set it on my fetch request to make my login, I using redux to store my data such: products, auth, cart and etc
AuthAction.js code:
export const LOGIN_AUTH = "LOGIN_AUTH";
export const LOGOUT_AUTH = "LOGOUT_AUTH";
export const HandleLogin = (data) => {
return async (dispatch, getState) => {
const getCsrf = await fetch("http://localhost:8000/sanctum/csrf-cookie");
if (!getCsrf.ok) {
throw new Error("Faild to set csrf token");
}
console.log("getCsrf", cookie.load("XSRF-TOKEN"));
const response = await fetch("http://localhost:8000/api/app/user/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw Error("Login faild");
}
try {
const responseData = await response.json();
console.log("login", responseData);
dispatch({
type: LOGIN_AUTH,
user: responseData,
});
} catch (err) {
console.log("Login err", err);
throw err;
}
};
};
after console.log("getCsrf", cookie.load("XSRF-TOKEN")); nothing happened.
what do I do wrong in my code?
cookie screenshot:
request response:
Use axios instead of fetch.
Example:
axios
.get("http://localhost:8000/sanctum/csrf-cookie", {
withCredentials: true,
})
.then((response) => {
axios("http://localhost:8000/api/app/user/login", {
method: "post",
data: data,
withCredentials: true,
})
.then((response) => {
console.log("login", response.data);
})
.catch((error) => {
console.log(error);
});
})
.catch((error) => {
// handle error
console.log(error);
})
.then(() => {
//
});
Since your next.js and laravel apps are on different origins, you need to set fetch to explicitly send cookies.
const response = await fetch("http://localhost:8000/api/app/user/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
credentials: 'include'
});
You can read more about the credentials property in the MDN docs
Also, you can read the cookie in the front-end if it's http-only cookie.
Also, don't forget to set up Cross origin resource sharing in your backend app.

axios doesn't get post request in redux-form

I have this code:
import axios from 'axios'
const storeDevices = values => {
axios.create({
baseURL: 'http://localhost:8000/something/store',
method: 'POST',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: values
});
}
export default storeDevices;
The following code is correct because it returns an object with all data from my form
const storeDevices = values => {
console.log(values);
}
export default storeDevices;
Interestingly if I try to use .then I have an error:
axios__WEBPACK_IMPORTED_MODULE_0___default.a.create(...).then is not a
function
Code with .then
axios.create({
baseURL: 'http://localhost:8000/something/store',
method: 'POST',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: values
}).then(res => {
console.log(res);
console.log(res.data);
});
It's because you've never told axios to send a POST request. axios.create creates a new instance of axios with a custom config. This instance have different methods (like .get(), .post(), etc.), none of which is then(), so that's why you received the error .then is not a function. You set the default method to POST but you've never sent a request.
I think you wanted to create this new instance because you didn't want to add the base URL and headers every single time. If you want to create a base instance, you can assign the returned value to a new variable:
const API = axios.create({
baseURL: 'http://localhost:8000/api/',
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
});
And use this instance to post your request:
API.post('store', data)
.then(res => {
console.log(res);
console.log(res.data);
});
can you try to post using this sintax?
axios.post('http://localhost:8000/something/store', values, {headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},}
}).then(res => {
console.log(res);
console.log(res.data);
});

Do I need redux-promise in this case?

So I am testing this api request inside my react-redux application:
import $ from 'jquery';
window.$ = $;
const API_KEY = '<api-key>';
const ROOT_URL = `https://api.behance.net/v2/users?client_id=${API_KEY}`;
export const FETCH_USER = 'FETCH_USER';
export function fetchUser(users) {
const request = $.ajax({
url: `${ROOT_URL}&q=${users}`,
type: 'get',
data: { users: {} },
dataType: 'jsonp'
})
.done(response => {
console.log('Request:', request);
})
.fail(error => {
console.log('Ajax request fails');
console.log(error);
});
return {
type: FETCH_USER,
payload: request
};
}
However, in the Chrome console for Request: I am getting an object with readyState instead of a Promise, do I even need to have the package redux-promise at this point?
I see what you are trying to do, but I don't think is a good idea to send a promise to a reducer instead I will recommend you to use the middleware redux-thunk.
I will rewrite your action this way
export const fetchUser= ()=>(dispatch,getState)=>{
let params={
method:'get',
body:{ users: {} },
}
fetch( `${ROOT_URL}&q=${users}`, params).then
.then(response => response.json())
.then((response) =>{
dispatch({
type:Const.ON_RESPONSE_OK,
payload:response
})
})
.catch(error => {
dispatch({
type:Const.ON_RESPONSE_ERROR,
payload:Error
})
});
}
and rewrite the reducer to handle the payloads

Axios post stay on pending

This is a simple Post request using Axios inside Vue:
import axios from 'axios'
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted () {
const code = 'test'
const url = 'http://localhost:3456/'
axios.post(url, code, { headers: {'Content-type': 'application/x-www-form-urlencoded', } }).then(this.successHandler).catch(this.errorHandler)
},
methods: {
successHandler (res) {
console.log(res.data)
},
errorHandler (error) {
console.log(error)
}
}
}
The Get method works fine. But Post stay as "Pending" on Network tab. I can confirm that there is a Post method on my webservice and it return something (tested on Postman).
UPDATE
Sending code as a param:
axios(url, {
method: 'POST',
headers: {
'content-type': 'application/json',
},
params: {
code : 'test'
},
}).then(this.successHandler).catch(this.errorHandler)
WEBSERVICE
server.post('/', (req, res, next) => {
const { code } = req.params
const options = {
validate: 'soft',
cheerio: {},
juice: {},
beautify: {},
elements: []
}
heml(code, options).then(
({ html, metadata, errors }) => {
res.send({metadata, html, errors})
next()
})
})
I think there's issue with your axios request structure.
Try this:
const URL = *YOUR_URL*;
axios(URL, {
method: 'POST',
headers: {
'content-type': 'application/json',
},
data: *YOUR_PAYLOAD*,
})
.then(response => response.data)
.catch(error => {
throw error;
});
If you're sending a query param:
axios(URL, {
method: 'POST',
headers: {
'content-type': 'application/json',
},
params: {
code: 'your_string'
},
})
if it is path variable you can set your url:
const url = `http://localhost:3456/${code}`
Let me know if the issue still persists
I also was facing the same. Network call was pending all the time and Mitigated it by passing the response back from server.js(route file) e.g(res.json(1);) and it resolved the issue

Generic dataloader for redux-thunk using axios

I am developing an application where there are lots of async actions. I wanted to go with redux-saga but most have insisted to continue with redux-thunk. In redux-thunk, inside each action we have to work with async operation using then, dispatch, catch, etc. This makes looks actions so messy and lots of code will be repeated. I wanted to create a generic dataLoader for the use of redux-thunk and axios but could not consider for both post(might be token or not) and get option.
Here is my attempt:
export class Company {
/**
* Generic api data loader
*/
static dataLoader(apiUri, onSuccess, onError, data, ...actionArguments) {
const requestURL = `${API_BASE}${apiuri}`;
try {
let options;
if (data !== undefined) {
// if we have data to post
options = {
method: 'POST',
url: requestURL,
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
},
};
}
}
return function(dispatch) {
axios(options)
.then(response => {
dispatch({
type: onSucess,
payload: response.data
});
})
.catch(error => {
dispatch({ type: onError, payload: err});
});
}
}
static get(apiUri, onSuccess, onError, ...actionArguments) {
return this.dataLoader(apiUri, onSuccess, onError, undefined, ...actionArguments);
}
/*
* Shorthand POST function
*/
static post(apiUri, onSuccess, onError, data, ...actionArguments) {
return this.dataLoader(apiUri, onSuccess, onError, data, ...actionArguments);
}
}
I want to convert the following code to further this one:
export function showResultofApartment() {
return (dispatch) => {
dispatch({ type: 'APARTMENT_FETCH_START' });
const token = localStorage.getItem('token');
return axios.get(`${API_URL}/newoffers/apartment/`)
.then((response) => {
console.log('response apart', response.data);
dispatch({ type: 'APARTMENT_FETCH_SUCCESS', payload: response.data });
})
.catch((err) => {
dispatch({ type: 'APARTMENT_FETCH_FAILURE', payload: err });
});
};
}
to such or more efficient than this:
export function showResultofApartment() {
return(dispatch) => {
dispatch({ type: APARTMENT_FETCH_START });
const token = localStorage.getItem('token');
return Company.get('/apartments', APARTMENT_FETCH_SUCCESS, APARTMENT_FETCH_ERROR);
// if post then Company.post('/apartment', APARTMENT_POST_SUCCESS, APARTMENT_POST_ERROR, data)
}
}
This way it is considering only post request(if data !== undefined). How should i handle for both get and post efficiently?
Okay, why don't you handle it like this:
Company.js
import { merge } from 'lodash';
import axios from 'axios';
function getHeaders() {
return {
'Content-Type': 'application/json'
};
}
export class Company {
static callAPI(endpoint, extendedOptions, onSuccess, onError) {
const initalHttpData = {
method: 'GET', // By default it's GET in case you didnt specify anything
headers: getHeaders(),
url: `${API_BASE}${endpoint}`
};
// merge takes care of replacing or adding the specific key's provided via the extendedOptions
const options = merge(initalHttpData, extendedOptions);
// Fire the request for the prepared options.
let request = axios(options);
// The request once fired, needs it's success handler and error handler.
return function(dispatch) {
request
.then(response => {
dispatch({
type: onSucess,
payload: response.data
});
})
.catch(error => {
dispatch({ type: onError, payload: err});
});
}
};
}
Then we can use actions to specifically pass things to this api util:
GET API call:
// GET Action
export function showResultofApartment() {
return (dispatch) => {
dispatch({ type: APARTMENT_FETCH_START });
const token = localStorage.getItem('token');
// FOR GET API
return Company.callApi('/apartments', {}, APARTMENT_FETCH_SUCCESS, APARTMENT_FETCH_ERROR);
}
}
POST API call:
// POST Action
export function showResultOfAppartmentPost() {
return (dispatch) => {
dispatch({ type: APARTMENT_FETCH_START });
const token = localStorage.getItem('token');
// This will merge, essentially replace the method=GET once it gets called.
const extendedOptions = {
method: 'POST',
body: JSON.stringify(data),
headers: {
'X-Requested-With': 'XMLHttpRequest',
}
}
// FOR GET API
return Company.callApi('/apartments', extendedOptions, APARTMENT_FETCH_SUCCESS, APARTMENT_FETCH_ERROR);
}
Thus, giving the action, to define it's own set of API body or requests.

Categories