爱可信POST请求不工作(Axios POST request not working)

我知道有很多问题在那里有同样的问题，但没有解决方案的还没有为我工作。

我有一个ReactJS应用消耗内置流明的API。 该API也由本土作出反应和JQuery AJAX消耗上都工作正常。

当我尝试发送与ReactJS Axios公司POST请求，我得到了OPTIONS请求405不允许错误。

的Axios的要求是：

const body = { username, password };

axios.post(`{$uri}/payment/api/login`, {body})
     .then(res => console.log(res))
     .catch(err => console.log('Login: ', err));

起初我以为这是一个CORS的问题，这将是奇怪的，因为我的API是由托管在AWS S3没有问题静态站点消耗。 所以我CORS中间件正常工作。

比我尝试使用fetchAPI调用API，并且工作正常。 我试图发送一个POST请求到虚拟API https://jsonplaceholder.typicode.com/users从Axios公司和它工作得很好。

编辑

好了，所以我刚刚发现fetchAPI在应用程序/ x-WWW-form-urlencoded格式这在某种程度上不受飞行前请求发送数据。 这应该意味着有与CORS中间件的问题。

CORSMiddleware

<?php

namespace App\Http\Middleware;

use Closure;

class CORSMiddleware
{
  /**
   * Handle an incoming request.
   *
   * @param  \Illuminate\Http\Request  $request
   * @param  \Closure  $next
   * @return mixed
   */

   public function handle($request, Closure $next)
   {
      $response = $next($request);
      $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS');
      $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
      $response->header('Access-Control-Allow-Origin', '*');
   }
}

完全相同的中间件也用于在管腔的另一API构建和由使用Axios公司 Vue的前端消耗。

附加信息

GET请求正常工作在我的API。

Answer 1:

问题是最有可能与您的请求头。 尝试设置内容类型ATLEAST。

let axiosConfig = {
  headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      "Access-Control-Allow-Origin": "*",
  }
};
const body = { username, password };

axios.post(`{$uri}/payment/api/login`, body, axiosConfig)
 .then(res => console.log(res))
 .catch(err => console.log('Login: ', err));

或设置Content-Type修改application/x-www-form-urlencoded如果你是在服务器端期待URL编码数据

Answer 2:

我有这个问题，结束了学习比我更想知道的CORS。 最后，我从白手起家，所有的开关重建的API CORS在我能找到的，然后向后剥离的代码如下：

axios.post(postUrl).then(
  (res) => {
    console.log('Axios:',res);
    console.log('Axios data:',res.data);
  }).catch((err) => { console.log('Axios Error:', err); })

工作就像一个魅力。 标头是必需的服务器端，而不是我的应用程序。 我希望可以帮助您。

Answer 3:

一个OPTIONS请求是为了你的请求之前来检查您是否允许执行从该域的请求，并可以用什么标题。 见 。

这OPTIONS请求失败，因为数据和Content-Type是相互矛盾的。

您需要在您的要求添加此标头： { 'Content-Type': 'application/json' }并使用JSON.stringify函数数据转换：

const data = JSON.stringify({ email, password });
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  data,
  url,
};
axios(options);

或者，你可以添加这个头在你的要求： { 'Content-Type': 'application/x-www-form-urlencoded' }

const data = { email, password };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data,
  url,
};
axios(options);

该解决方案依赖于后端API规范。

文章来源: Axios POST request not working