Реакция + проблемы с Django Axios

Question

У меня есть приложение реагирования, связанное с бэкэндом Django на двух отдельных серверах.Я использую DRF для django, и я разрешил cors, используя django-cors-headers.По какой-то причине, когда я заворачиваю POST в бэкэнд, я могу получить запрос.Однако когда я использую axios POST бэкэнд, я получаю и ошибку.Состояние запроса POST от axios не выполнено.Запрос и занимает более 10 секунд, чтобы завершить.Мой код работал локально (как коды реагирования, так и коды django), но при развертывании в AWS ec2 ubuntu запросы axios перестали работать.

Журналы ошибок консоли

OPTIONS http://10.0.3.98:8000/token-auth/ net::ERR_CONNECTION_TIMED_OUT

{
  "config": {
    "transformRequest": {},
    "transformResponse": {},
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "headers": {
      "Accept": "application/json, text/plain, */*",
      "Content-Type": "application/json;charset=UTF-8",
      "Access-Control-Allow-Origin": "*"
    },
    "method": "post",
    "url": "http://10.0.3.98:8000/token-auth/",
    "data": "{\"username\":\"testaccount\",\"password\":\"testpassword\"}"
  },
  "request": {}
}

Вот мой код запроса

axios.post('http://10.0.3.98:8000/token-auth/',
                JSON.stringify(data),
                {
                    mode: 'no-cors',
                    headers: {
                        'Content-Type': 'application/json',
                        'Access-Control-Allow-Origin' : '*'
                    },
                 },
            ).then( res => (
                console.log(JSON.stringify(res)),

            )
            ).catch( err => (
                console.log(JSON.stringify(err))
                )
            );

мой код скручивания, который работал

curl -d '{"username":"testaccount", "password":"testpassword"}' -H "Content-Type: application/json" -X POST http://10.0.3.98:8000/token-auth/

ОБНОВЛЕНИЕ 1

на Firefox я получаю предупреждение

Запрос перекрестного источника заблокирован: та же политика происхождения запрещает чтение удаленного ресурса в http://10.0.3.98:8000/token-auth/. (причина: запрос CORS не выполнен). [Узнать больше]

ОБНОВЛЕНИЕ 2

Возможно, это как-то связано с моим AWS VPC и подсетями?Мой сервер django находится в частной подсети, в то время как мое приложение реакции находится в публичной подсети.

ОБНОВЛЕНИЕ 3 - мое представление о том, в чем проблема

Я думаю, причина, почему мои запросы от axiosне работает, потому что запросы, которые я делаю, устанавливают источник заголовка запроса на http://18.207.204.70:3000 - публичный / внешний IP-адрес - вместо частного / внутреннего IP-адреса, который http://10.0.2.219:3000- Я ищу в Интернете, что источник является запрещенным полем, поэтому его нельзя изменить.Как я могу установить происхождение тогда?Нужно ли использовать прокси - как я могу это сделать.

Answer 1

Проблема заключается в том, что запрос выполняется в браузере клиента.Вам нужно либо использовать обратный прокси, либо запросить напрямую к серверу API.Вы также не можете выполнить локальную пересылку по ssh.

Answer 2

попробуйте этот http-запрос вместо axios , он называется superagent (https://www.npmjs.com/package/superagent), просто установите его в свое приложение реагирования через npm,

npm i superagent

и используйте этовместо axios.

import request from 'superagent'

    const payload ={
                    "1": this.state.number,
                    "2": this.state.message
                    }


    request.post('LINK HERE')
            .set('Content-Type', 'application/x-www-form-urlencoded')
            .send(payload)
            .end(function(err, res){
                if (res.text==='success'){
                    this.setState({
                        msgAlert: 'Message Sent!',
                    })
                }
                else{
                    console.log('message failed/error')
                }
            });