我使用 Angular 4 webapi2 遇到交叉原点错误答案

【问题标题】：I am getting Cross origin error using angular 4 webapi2我使用 Angular 4 webapi2 遇到交叉原点错误
【发布时间】：2018-12-18 20:55:26
【问题描述】：

我正在使用 Angular 4 和 Web api 开发一个应用程序。即使我在 Web.config 、 Start Up、 WebApiConfig 和 Controller 中保留了代码，我也收到了 CORS 错误，但我仍然收到此错误。我不知道如何弄清楚。这是我的代码示例

Startup.cs

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

WebApiConfig

 var cors = new EnableCorsAttribute("*", "*", "*");
            config.EnableCors(cors);

Web.Config

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>

控制器

 [EnableCors(origins: "*", headers: "*", methods: "*")]
    [ApiVersion1RoutePrefix("Settings")]
    public class SettingsController : ApiController

甚至有人要求从网络配置中删除此标签，我也这样做了

<!--<remove name="OPTIONSVerbHandler" />-->

我的角度电话在这里

  public getbyString<T>(apiUrl:any,param: string): Observable<T> {
    let _options = { headers: new HttpHeaders(
      { 
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+ localStorage.getItem('access_token')
      }
    )};
    return this.http.get<T>(this.actionUrl+apiUrl +"?version="+param,_options);
  }

请查看以下内容以查看错误。

我已经完成了这一切，但还没有成功。

【问题讨论】：

“我收到 CORS 错误” — 什么 CORS 错误？浏览器可能会输出与 CORS 相关的几种不同的错误消息。如果你不告诉我们你得到的是哪一个，真的很难发现问题！
为什么在 GET 请求中获得 Content-Type 标头？该请求没有描述内容类型的正文！
我补充说，这可能会解决我的错误，尽管它没有
一个来源是www.example.com，另一个是example.com - 为什么要发起跨来源请求？只需选择一个主机名并仅使用它即可。（将另一个重定向到它）。
有时使用example.com 而有时使用www.example.com 总是使用www.example.com

标签： angular cors webapi2

【解决方案1】：

CORS（跨域资源共享）是服务器说“我会接受你的请求，即使你来自不同的来源”的一种方式。这需要服务器的配合——因此，如果您无法修改服务器（例如，如果您使用的是外部 API），则此方法将不起作用。

修改服务器以添加标头 Access-Control-Allow-Origin: * 以启用来自任何地方的跨域请求（或指定域而不是 *）。

【讨论】：

“修改服务器以添加标头 Access-Control-Allow-Origin”——他们似乎已经这样做了。您可以在问题的代码中看到它。