Question

我在React JS中使用Axios从API（我使用.NET WEB API创建的API）中提取数据 Axios.Get非常适合我，现在我正尝试使用Axios.Post通过我的API（http://localhost:51492/api/experience）在我的数据库中添加数据但我在后端项目中遇到错误：

SqlException：INSERT语句与FOREIGN KEY冲突约束“ FK_experiences_users_UserID”。发生冲突数据库“ master”，表“ dbo.users”，列“ Id”。该声明有已终止。

，当我收到上一个错误后继续运行后端项目时出现此错误：（ google dev tools中显示的错误）

无法加载资源：服务器响应状态为500   （内部服务器错误）配置文件：1加载失败   http://localhost:51492/api/experience：否   请求中存在“ Access-Control-Allow-Origin”标头   资源。因此，不允许原点“ http://localhost:3000”   访问。响应的HTTP状态码为500。

createError.js：16未捕获（承诺）错误：网络错误       在createError（createError.js：16）       在XMLHttpRequest.handleError（xhr.js：87）createError @ createError.js：16 handleError @ xhr.js：87

这是我使用axios.post在React js中的代码：

import React from 'react';
import axios from 'axios';
 var nowDate = new Date();
export default class PersonList extends React.Component {
  state = {
    titre: '',
    contenu: ''
  }

  handleChange = event => {
    this.setState({ titre: event.target.value,  contenu: event.target.value});
  }

  handleSubmit = event => {
    event.preventDefault();

    const exp = {
      titre: this.state.titre,
      contenu: this.state.contenu,
      datePub:  nowDate ,
      userID: 1
    };

    axios.post(`http://localhost:51492/api/experience`, { exp })
      .then(res => {
        console.log(res);
        console.log(res.data);
       })


  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            titre:
            <input type="text" name="titre" onChange={this.handleChange} />
          </label>
          <label>
            contenu:
            <input type="text" name="contenu" onChange={this.handleChange} />
          </label>

          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

请有人可以帮助我吗？预先谢谢你

Answer 1

请确保已出于开发目的在服务器端启用了CORS。

尝试通过这种方式设置标题并发送发布请求：

const URL = `http://localhost:51492/api/experience`;

 return axios(URL, {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
    data: exp,
  })
    .then(response => response.data)
    .catch(error => {
      throw error;
    });

让我知道问题是否仍然存在！很高兴提供帮助

Answer 2

您需要在服务器中启用CORS（它基本上允许每个XHR实例向其请求数据。有关如何在ASP.NET上启用CORS的在线资源很多。如果您不拥有服务器，请考虑使用fetch而不是axios。

Axios.post在React js中不起作用

2 个答案: