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

问题描述

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

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

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

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.

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

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

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中间件工作正常.

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.

比我尝试使用fetchAPI调用API的效果还好.我试图将 POST 请求发送到虚拟API ="a href =" https://jsonplaceholder.typicode.com/users"rel =" nofollow noreferrer> https://jsonplaceholder来自axios的.typicode.com/users ，效果很好.

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.

修改

好的，所以我刚刚发现fetchAPI以 application/x-www-form-urlencoded 格式发送数据，而该格式不以预检请求为准.这应该意味着CORS中间件存在问题.

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

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

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

其他信息

GET 请求在我的API上运行正常.

GET Request works fine on my API.

推荐答案

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

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

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

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屋！