0
164
ViewsGetting a bad request response from an api call that is supposed to return a link to be used for iframe src
I am trying to do a GET method so that I can get back the link to be used in the src attribute of the iframe. So what I did was the following:
import axios from 'axios';
import { BASE_API_ROOT } from '../../apiConfig';
async function getJobView() {
const options = {
method: 'GET',
headers: {
'content-type': 'application/json'
},
url: `${BASE_API_ROOT}/level2`
};
return axios(options);
}
export { getJobView };
So I tried to embed the iframe into a popup modal. So what I did was import that api function and use it in my component like below:
modalContent = () => {
const { classes, history } = this.props;
const srcUrl = getJobView().then(res => console.log(res)).catch(err => console.log(err.message));
console.log(srcUrl);
const renderGetJobView = () => {
return <iframe src={srcUrl} style={{ width: '800px', height: '800px' }}></iframe>
}
return (
<Paper className={classes.modalPaper}>
{renderGetJobView()}
</Paper>
);
};
In the console I see this:
Any idea about this?
·
Juan Pablo Isaza
2 answers
Answer question0
The requested resource was not found.
404 status code means resource not found. Check your server side your calling correct API's URL.
Here you can check status code of API's api_response_codes
·
Juan Pablo Isaza
Report
0
I would rather format your code in more readable way and try to find out where it break.
axios.js
import axios from 'axios';
import { BASE_API_ROOT } from '../../apiConfig';
const axiosInstance = axios.create({
baseURL: BASE_API_ROOT,
headers: {
'content-type': 'application/json'
},
})
export const getJobView = async () => {
return axiosInstance.get("/level2")
}
component.js
const modalContent = () => {
const { classes, history } = this.props;
const [srcUrl, setSrcUrl] = useState("")
useEffect(() => {
const getJobViewData = async () => {
try {
const getJobViewResponse = await getJobView()
setSrcUrl(getJobViewResponse.data)
} catch (error) {
setSrcUrl("")
}
}
getJobViewData()
}, [])
return (
<Paper className={classes.modalPaper}>
{srcUrl !== ""
? <iframe src={srcUrl} style={{ width: '800px', height: '800px' }}></iframe>
: null
}
</Paper>
);
};
Now, It's easy to find out where the code breaks, either in Api endpoint or somewhere else.
·
Juan Pablo Isaza
Report
Answer question