如何修复 Angular/.NET 项目中的“跨源请求被阻止：同源策略不允许读取远程资源”

Question

当我向我们的 API 端点提交 HTTP GET 请求时，我收到错误消息，指出缺少 CORS 标头“Access-Control-Allow-Origin”。我们有一个连接到带有 Angular 7 前端的 .NET API 的 SQL Server 数据库。这是提交请求的 Angular 服务public VALUES_API_ENDPOINT = 'http://localhost:53273/api/search';  constructor(private httpClient: HttpClient) { }  async queryResults(terms: string): Promise<any> {    try {      const result = await this.httpClient.get(this.VALUES_API_ENDPOINT + '/title/' + terms).toPromise();      return result;    } catch (error) {        await this.handleError(error);    }  }后端控制器调用如下所示：[HttpGet][Route("title")]public HttpResponseMessage SearchByTitle(string s){   HttpResponseMessage response;   try   {       List<Regulation> results = search.SearchRegulationByTitle(s);       string json = CondensedRegulationsToJson(results);       response = Request.CreateResponse(HttpStatusCode.OK);       response.Content = new StringContent(json, Encoding.UTF8, "application/json");   }   catch (Exception)   {       response = Request.CreateResponse(HttpStatusCode.InternalServerError);   }   return response;}我们的 API 配置如下所示：public static void Register(HttpConfiguration config){   // Web API configuration and services   // Web API routes   config.MapHttpAttributeRoutes();   config.Routes.MapHttpRoute(         name: "DefaultApi",         routeTemplate: "api/{controller}/{id}",         defaults: new { id = RouteParameter.Optional }   );   // Enable CORS for the Angular App   // NOTE: Since we are running both the frontend and the backend locally, we can trust this origin with all headers and methods (the *). In practice, we would only allow really needed headers and methods    config.EnableCors(new EnableCorsAttribute("http://localhost:4200", "*", "*", "*"));  // Make JSON the default formatter over XML  config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();            config.Formatters.Remove(config.Formatters.XmlFormatter);}我们应该从数据库接收数据，但我们只是根据 CORS 属性被拒绝访问。

Answer 1

您的 api 网址不正确：

您还有其他/new/导致 404 错误的原因。从 api url中取出/new，问题应该得到解决。

 const result = await this.httpClient.get(this.VALUES_API_ENDPOINT + '/title/' + terms).toPromise();