ASP.NET Core+React请求报错：JSON解析异常原因排查

问题场景 #

在ASP.NET Core Web应用中，编写了如下TestController处理HTTP GET请求：

[ApiController]
[Route("api/[controller]")]
public class TestController : Controller
{
    [HttpGet("ProcessString")]
    public IActionResult ProcessString([FromQuery] string inputString)
    {
        var result = new { Result = inputString };
        return Ok(result);
    }
}

前端使用React组件发送请求：

/* eslint-disable no-unused-vars */
import React, { useState } from 'react';

function TestClient() {
    const uri = 'api/Test/ProcessString';
    const [inputString, setInputString] = useState('');
    const [response, setResponse] = useState('');

    const sendRequest = () => {
        fetch(`${uri}?inputString=${inputString}`, {
            headers: {
                Accept: 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
                setResponse(data.Result);
            })
        .catch(error => {
                console.error('An error occurred:', error);
            });
    }

    return (
        <div>
            <input type="text" value={inputString} onChange={(e) => setInputString(e.target.value)} />
            <button onClick={sendRequest}>Send Request</button>
            <div>
                <strong>Response:</strong> {response}
            </div>
        </div>
    );
}

export default TestClient;

点击按钮发送请求时，触发错误：An error occurred: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON"

可能的原因 #

• API路由匹配失败，返回默认HTML页面：
  虽然控制器路由api/[controller]/ProcessString和前端请求的api/Test/ProcessString理论上匹配，但如果ASP.NET Core中间件顺序配置错误（比如UseSpa、UseStaticFiles放在UseRouting和UseEndpoints之前），会导致API请求被拦截，返回SPA的入口HTML页面而非JSON响应。

• 请求的基础URL错误：
  前端使用相对路径api/Test/ProcessString，若React应用的部署根路径与API根路径不一致（比如React在子路径下，或API部署在不同端口/域名），实际请求的URL会无效，服务器返回404错误页面的HTML，导致JSON解析失败。

• 控制器未被正确注册：
  若Program.cs中未添加builder.Services.AddControllers()，或控制器所在程序集未被框架扫描到，服务器无法识别该API接口，返回404页面的HTML。

• 查询参数未编码导致请求异常：
  前端直接将inputString拼接进URL查询参数，若输入包含&、=、空格等特殊字符，会破坏URL格式，服务器可能返回错误页面的HTML。需用encodeURIComponent()编码参数：

  `${uri}?inputString=${encodeURIComponent(inputString)}`
  

内容的提问来源于stack exchange，提问作者Roman