reactjs 与核心 3.1 api 控制器。获取 json 错误而不是返回数据

Question

我正在创建一个登录表单并尝试获取会话状态的数据。我收到错误“Uncaught (in promise) SyntaxError: Unexpected token

Login.js file

        import React, { Component } from 'react';
        import { Header } from './Header';
    
        class Login extends Component {
            constructor(props) {
                super(props);
    
                this.state = { fields: { "idAccount": 0, "idAccountUser": 0, "UserFirstName": "", 
        "UserLastName": "", "UserEmail": "", "UserCulture": "", "AllowContentDistribution": false }, 
        errors: {} };
                this.state = { inputFields: { "userName": "", "password": "" } };
    
            }
    
        authenticateUser(e) {
            e.preventDefault();
            var userName = e.userName;
            var password = e.password;
    
            if (this.handleValidation()) {
    
                fetch("Http://localhost:1234/api/CustomerManager/AuthenticateUser?UserName=" + userName + 
        "&Password=" + password, {
                    method: "GET",
                    headers: {
                        contentType: "application/json; charset=utf-8",
                        accept: 'application/json'
                    },
                })
                    .then((response) => {
                        response.json();
                    })
                    .then((data) => {
                        this.state.fields = data;
                        console.log(data);
                        console.log("idAccount: {0}, UserFirstName: {1}, UserLastName: {2}", 
        this.state.fields["idAccount"], this.state.fields["UserFirstName"], 
        this.state.fields["UserLastName"]);
                    })
                    .catch((error) => {
                        console.log('error: ' + error);
                    });
            }
            else {
                console.log('error: ' + this.state.errors);
            }
        };
    
        handleValidation() {
            let fields = this.state.inputFields;
            let errors = {};
            let formIsValid = true;
    
            //UserName
            if (!fields["userName"]) {
                formIsValid = false;
                errors["userName"] = "UserName Cannot be empty";
            }
    
            //Password
            if (!fields["password"]) {
                formIsValid = false;
                errors["password"] = "Password Cannot be empty";
            }
    
            this.setState({ errors: errors });
            return formIsValid;
        };
    
         handleChange(field, e) {
            let fields = this.state.inputFields;
            fields[field] = e.target.value;
            this.setState({ fields });
        };
    
            render() {
            
                return (
                    <>
                        <Header />
                    <div className="login center">
                        <form
                                onSubmit={this.authenticateUser.bind(this)}
                        >
                            <div>
                                <label htmlFor="userName">
                                Username:
                            
                                </label>
                            </div>
                            <div>
                                <input
                                        id="userName"
                                        onChange={this.handleChange.bind(this, "userName")} value= 
       {this.state.inputFields["userName"]}
                                />
                            </div>
                            <div>
                                <label htmlFor="password">
                                Password (case-sensitive):
                            
                                </label>
                            </div>
                            <div>
                                <input
                                    id="password"
                                        type="password"
                                        onChange={this.handleChange.bind(this, "password")} value= 
       {this.state.inputFields["password"]}
                                />
                            </div>
                            <div>
                                <button className="Button ActionButton">Sign In</button>
                            </div>
                        </form>
                        </div>
                        </>
                );
            };
        }
    
        export default Login

Controller

    

    [HttpGet]
            public IHttpActionResult AuthenticateUser(string userName, string password)
            {
                try
                {
                    Login.AuthenticateUser(userName, password);
    
                    SessionState sessionState = new SessionState
                    {
                        IdAccount = IdAccount,
                        IdAccountUser = IdAccountUser,
                        UserFirstName = UserFirstName,
                        UserLastName = UserLastName,
                        UserEmail = UserEmail,
                        UserCulture = UserCulture,
                    };
    
                    return Ok(sessionState);
                }
                catch (Exception ex)
                {
                    // show the error
                    return InternalServerError(ex);
                }
    
            }

Answer 1

基本上，问题来自响应类型，我在我身边测试，id确实有效。您的login.js 中有一些错误，但与您的错误无关。

根据我的搜索，我发现IHttpActionResult是一个不是existed in Core的接口，如果你的web api项目在asp.net core中，你需要使用IActionResult。我还建议使用 asp.net core 而不是 asp.net。顺便说一句，如果你仍然无法得到json响应，你可以参考this section在你的方法上添加过滤器[Produces("application/json")]。

登录.js

import React, { Component } from 'react';

class Login extends Component {
    constructor(props) {
        super(props);

        this.state = { fields: { "idAccount": 0, "idAccountUser": 0, "UserFirstName": "", 
                                "UserLastName": "", "UserEmail": "", "UserCulture": "", "AllowContentDistribution": false 
                            }, 
                        errors: {} ,
                        inputFields: { "userName": "", "password": "" } 
                    };
    }

authenticateUser(e) {
    e.preventDefault();
    var userName = this.state.inputFields.userName;
    var password = this.state.inputFields.password;

    const res = fetch("https://localhost:44325/api/CustomerManager/AuthenticateUser?UserName=" + userName + "&Password=" + password, {
        method: "GET",
        headers: {
            contentType: "application/json; charset=utf-8",
            accept: 'application/json'
        },
    })
    .then(res =>res.json())
    .then((data) => {
        console.log(data);
        console.log("msg is :"+data.msg);
    })
    .catch((error) => {
        console.log('error: ' + error);
    });
};

handleChange(field, e) {
    let fields = this.state.inputFields;
    fields[field] = e.target.value;
    this.setState({ fields });
};

    render() {
    
        return (
            <>
                {/* <Header /> */}
            <div className="login center">
                <form
                        onSubmit={this.authenticateUser.bind(this)}
                >
                    <div>
                        <label htmlFor="userName">
                        Username:
                    
                        </label>
                    </div>
                    <div>
                        <input
                                id="userName"
                                onChange={this.handleChange.bind(this, "userName")} value= 
{this.state.inputFields["userName"]}
                        />
                    </div>
                    <div>
                        <label htmlFor="password">
                        Password (case-sensitive):
                    
                        </label>
                    </div>
                    <div>
                        <input
                            id="password"
                                type="password"
                                onChange={this.handleChange.bind(this, "password")} value= 
{this.state.inputFields["password"]}
                        />
                    </div>
                    <div>
                        <button className="Button ActionButton">Sign In</button>
                    </div>
                </form>
                </div>
                </>
        );
    };
}
export default Login

这是我的控制器，在 asp.net core3.1 中：

using Microsoft.AspNetCore.Mvc;

namespace test0715.Controllers
{
    public class AuthController : Controller
    {
        [Route("/api/CustomerManager/AuthenticateUser")]
        public IActionResult Index(string UserName, string Password)
        {
            SessionState ss = new SessionState
            {
                age = 18,
                name = "test"
            };
            return Ok(ss);
        }
    }

    public class SessionState {
        public int age { get; set; }
        public string name { get; set; }
    }
}

如果您在 asp.net 中编写您的 api，您可以在下面看到示例。这里，如果我调用http://localhost:53148/api/auth?name=aa&psd=bb，我会得到xml响应，而我在login.js中调用它会得到json响应。

using System.Web.Http;
using System.Web.Http.Cors;

namespace WebApplication1.Controllers
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class AuthController : ApiController
    {
        [HttpGet]
        public IHttpActionResult Get(string name,string psd)
        {
            Product product = new Product
            {
                age = 18,
                name = "hello"
            };
            return Ok(product);  // Returns an OkNegotiatedContentResult
        }
    }

    public class Product {
        public int age { get; set; }
        public string name { get; set; }
    }
}

App_start->webapiconfig.cs

using System.Web.Http;

namespace WebApplication1
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.EnableCors();
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}