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?

CodePudding user response：

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.

CodePudding user response：

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