Question

我有一个React应用程序链接到两个单独服务器上的Django后端。我正在为Django使用DRF，并且允许使用django-cors-headers进行cors。由于某种原因，当我卷曲POST后端时，我能够发出请求。但是，当我使用axios POST后端时，出现错误。来自axios的POST请求的状态失败。该请求需要10秒钟以上才能完成。我的代码在本地工作（react和django代码），但是当我部署到AWS ec2 ubuntu时，axios请求停止工作。

控制台错误日志

@Query("select c from Category c left outer join fetch c.items is left outer join fetch is.Item where t.id = :id")
Category getOneWithItems(@Param("id") Long id);

$nameArr = [];
$responsArray=json_decode($res->getBody());
foreach($responsArray->workspaces->workspace as $row)
{
  $nameArr[] = $row->name;
}
dd($nameArr);

这是我的请求代码

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

我有效的curl代码

{
  "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": {}
}

更新1

在Firefox上我收到警告

跨源请求被阻止：同源策略禁止阅读 http://10.0.3.98:8000/token-auth/上的远程资源。（原因： CORS请求未成功）。[了解更多]

更新2

也许与我的AWS VPC和子网有关？我的django服务器位于私有子网中，而我的react应用位于公共子网中。

更新3-我对问题所在的想法

我认为来自axios的请求无法正常工作的原因是，我正在发出的请求将请求标头的来源设置为http://18.207.204.70:3000-公共/外部IP地址-而不是私有/内部ip地址，http://10.0.2.219:3000-我在网上搜索起源是一个禁止字段，因此无法更改。那我该如何设置原点？我是否必须使用代理-我该怎么做。

Answer 1

尝试此http请求而不是 axios ，它称为超级代理（https://www.npmjs.com/package/superagent），只需通过npm将其安装到您的react应用中，

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')
                }
            });

Answer 2

这里的问题是请求是在客户端浏览器上发出的。您需要使用反向代理或直接向api服务器请求。您也不能执行本地ssh转发。

React + Django Axios问题

2 个答案: