Question

我有一个Angular前端和一个c＃webAPI后端。 Angular前端可以从其他url（例如http://reqres.in/api/users和json-server --watch db.json）检索数据。 c＃webAPI成功将数据返回到api调用（在浏览器中输入并从Postman（Get，http://localhost:49566/api/people）发送）。当前端调用后端时，将获得以下信息： HTTP404：未找到-服务器未找到与请求的URI（统一资源标识符）匹配的任何内容。（XHR）选项-http://localhost:49566/people

有什么建议可以解决问题，或者是在前端还是后端？

我回顾了几个Angular httpclient示例；但继续遇到同样的事情-与其他网址一起使用；但不包含我的c＃webAPI的网址。

我尝试添加post选项；但这并不能解决。

C＃代码：

        public IEnumerable<Person> Get()
        {
            return SQLiteDataAccess.GetPeople();
        }

角度数据服务代码：

  people: object;

  constructor(private http: HttpClient) { }

    searchClick(searchString: string) {
    return console.log('clicked ' + searchString);
  }

  getPeople() {
    const httpOptions = {
      headers: new HttpHeaders({
          'Access-Control-Allow-Origin': 'http://localhost:4200/',
          'Access-Control-Allow-Methods': 'GET',
          'Access-Control-Allow-Headers': '*',
          'Content-Type': 'application/json',
          'Accept': 'application/json'
      })
    };
    return this.http.get('http://localhost:49566/api/People', httpOptions )  
}
}

我需要的是前端能够成功地从后端检索数据；所以我可以显示它。

Answer 1

更改

   return this.http.get('http://localhost:49566/api/People', httpOptions )

到

   return this.http.get('http://localhost:49566/api/people', httpOptions )

URL区分大小写。

祝你好运！

Answer 2

问题与服务器侧的CORS和服务器上的方法签名有关。

首先，在您的API代码（C＃）中启用CORS。请在MSDN中搜索所需的适当名称空间/ dll（例如System.Web.Cors）。

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

在API控制器派生的类（例如）中，请执行此操作以确保允许CORS。 *表示允许所有URL。根据客户（Angular应用程序uri）的需要进行更改。

/// <summary>
    /// Provides API for Order entity.
    /// </summary>
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class OrderController : ApiController
    {

在CORS中，使用OPTIONS方法发送了飞行前请求，以便服务器可以响应是否可以使用这些参数发送请求。它在发送GET或POST之前发送。

回到API代码，在web.config中，请确保您具有以下条件：

<system.webServer>
  <handlers>
    <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
    <remove name="OPTIONSVerbHandler" />
    <remove name="TRACEVerbHandler" />
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  </handlers>
</system.webServer>

<remove name="OPTIONSVerbHandler" />确保IIS不会拦截OPTIONS请求。

还要在web.config中，执行以下操作。这样可以确保允许使用GET，POST和OPTIONS方法。

<httpProtocol>
      <customHeaders>            
        <!--...omitted for brevity-->

        <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
      </customHeaders>

最后：

[HttpGet]
public IEnumerable<Person> Get()
        {
            return SQLiteDataAccess.GetPeople();
        }

在Angular的客户端代码中无需对CORS进行任何操作。希望有帮助。

在C＃后端上调用api时，角度前端出现错误

2 个答案: