Axios POST 请求不起作用答案

【问题标题】：Axios POST request not workingAxios POST 请求不起作用
【发布时间】：2018-12-25 00:52:03
【问题描述】：

我知道有很多关于相同问题的问题，但没有一个解决方案对我有用。

我有一个使用 Lumen 内置 API 的 ReactJS 应用程序。该 API 也被 React Native 和 JQuery AJAX 使用，并且在两者上都可以正常工作。

当我尝试从 ReactJS 使用 axios 发送 POST 请求时，我在 OPTIONS 请求上收到 405 Method Not Allowed 错误。

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 并且效果很好。我尝试从 axios 向虚拟 API https://jsonplaceholder.typicode.com/users 发送 POST 请求，它工作正常。

编辑

好的，我刚刚发现 fetchAPI 以 application/x-www-form-urlencoded 格式发送数据，这种格式在某种程度上不受飞行前请求的影响。这应该意味着 CORS 中间件存在问题。

CORSM中间件

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

完全相同的中间件也用于 Lumen 中的另一个 API 构建，并由使用 axios 的 Vue 前端使用。

其他信息

GET 请求在我的 API 上运行良好。

【问题讨论】：

这个问题你解决了吗？
我确实设法修复了它，但我不记得具体是如何修复的。我认为这是我的 API 的问题。没有来自 React Native。
就我而言，我不得不使用https://www.example.com 而不是https://example.com
You have to pass your params in a params argument to axios

标签： reactjs api http-post axios lumen

【解决方案1】：

问题很可能与您的请求标头有关。尝试至少设置 Content-Type。

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

如果您希望服务器端有 url 编码数据，则将 Content-Type 设置为 application/x-www-form-urlencoded

【讨论】：

axios 将 content-type 设置为 applicatio/json 本身，但是手动设置也无济于事。
当我使用x-www-form-urlencoded 时，我从 PHP 获取 $_POST 对象中 JSON 字符串中的参数

【解决方案2】：

我遇到了这个问题，最终学到的关于 COR 的知识比我想知道的要多。最终，我从头开始，使用我能找到的所有 COR 开关重新创建 API，然后将代码剥离为：

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

工作就像一个魅力。服务器端需要标头，而不是我的应用程序。希望对你有帮助。

【讨论】：

对不起 saas_joel 那是很久以前的事了。当时这是一个修复，我发帖是为了让其他人朝着正确的方向前进。
谢谢，大卫，我必须解决我的 Axios 问题，它如何保护免受 XRSF 影响真是太棒了

【解决方案3】：

在您的请求之前使用 OPTIONS 请求，以检查您是否被允许执行来自该域的请求以及可以使用哪些标头。 See.

此 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 规范。

【讨论】：

【解决方案4】：

对我来说，问题出在服务器端（Node.js）。

我在应用 CORS 设置之前应用了我的中间件功能（检查令牌是否存在），这导致只发生 OPTIONS 调用。

例如

app.use(verifyToken);
require("./startup/cors")(app)

我颠倒了他们的顺序，对我来说效果很好。

【讨论】：

【解决方案5】：

如果您在 larval 使用此请求，则需要从 fromData 中删除 _method

const formData = new FormData(document.querySelector('form'));
formData.delete('_method');

【讨论】：