Axios POST 请求不起作用 [英] Axios POST request not working

问题描述

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

我有一个使用 Lumen 内置 API 的 ReactJS 应用程序.该 API 也被 React Native 和 JQuery AJAX 使用，并且在两者上都运行良好.

当我尝试从 ReactJS 发送带有 axios 的 POST 请求时，我在 OPTIONS 请求中收到 405 Method Not Allowed 错误.

axios 请求是:

const body = { 用户名，密码};axios.post(`{$uri}/payment/api/login`, {body}).then(res => console.log(res)).catch(err => console.log('登录:', err));

起初我认为这是 CORS 问题，这会很奇怪，因为我的 API 被托管在 AWS S3 上的静态站点使用，没有任何问题.所以我的 CORS 中间件工作正常.

我尝试使用 fetchAPI 来调用 API 并且效果很好.我尝试向虚拟 API

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

解决方案

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

让 axiosConfig = {标题:{'内容类型':'应用程序/json；字符集=UTF-8'，"Access-Control-Allow-Origin": "*",}};const body = { 用户名，密码 };axios.post(`{$uri}/payment/api/login`, body, axiosConfig).then(res => console.log(res)).catch(err => console.log('登录:', err));

或者将 Content-Type 设置为 application/x-www-form-urlencoded 如果您希望在服务器端使用 url 编码数据

I know there are lots of question out there with the same issue, but none of the solutions have worked for me yet.

I have a ReactJS application consuming an API built in Lumen. The API is also consumed by React Native and JQuery AJAX and works fine on both.

When I try to send a POST request with axios from ReactJS, I get a 405 Method Not Allowed error on the OPTIONS Request.

The axios request is:

const body = { username, password };

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

At first I thought this was a CORS issue, which would have been strange because my API is being consumed by a static site hosted on AWS S3 with no problems. So my CORS middleware works fine.

Than I tried using fetchAPI to call the API and that works fine. I tried to send a POST request to a dummy API https://jsonplaceholder.typicode.com/users from axios and it worked fine.

Edit

Okay so I just found out that fetchAPI sends data in application/x-www-form-urlencoded format which somehow is not subject to pre-flight requests. That should mean that there is an issue with the CORS Middleware.

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

The exact same Middleware is also used in another API build in Lumen and consumed by Vue Front-End which uses axios.

Additional Info

GET Request works fine on my API.

解决方案

Problem is most likely with your request headers. try setting Content-Type 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));

or set the Content-Type to application/x-www-form-urlencoded if you are expecting url encoded data in the server side

这篇关于Axios POST 请求不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！