在ASP .NET Web API和Angular 6中启用Cors

时间:2019-02-21 10:13:34

标签: .net angular vb.net cors

编辑:我犯了一个愚蠢的错误,忘记了URL之前的http://。添加它解决了我的问题。感谢大家的帮助。

经过多年的寻找解决方案,但似乎没有任何效果,我想在这里问。也许我只是忽略了一些东西。

我总是遇到以下错误

zone.js:2969 Access to XMLHttpRequest at 'localhost:61230/api/Assignment?Owner=User' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

我安装了Cors软件包,

Install-Package Microsoft.AspNet.WebApi.Cors

我的.NET代码如下:

Public Sub Register(VyVal config as HttpConfiguration)
   Dim corsConfig as EnableCorsAttribute = New EnableCorsAttribute("*","*","*")
   config.EnableCors(corsConfig)

   config.MapHttpAttributeRoutes()
   config.Routes.MapHttpRoute(
       name:="DefaultApi",
       routeTemplate:="api/{controller}/{Owner}",
       defaults:=New With {.Owner = RouteParameter.Optional}
End Sub

在Web.config中,我添加了以下内容:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="*" />
      <add name="Content-Type" value="*"></add>
    </customHeaders>
  </httpProtocol>
<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>

在Angular中,代码就是这个

constructor(
    private httpService: HttpClient
) { }

getAssignments() {
    let params = new HttpParams().set('Owner', 'User');
    let httpOptions ={
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin':'*',
        }),
        params: params
    };

    try {
        this.httpService.get<Assignment>( this.HTTPGetUri, httpOptions).subscribe(values => {        
        console.log(values);
    },
    (err: HttpErrorResponse) => {
        if (err.error instanceof Error){
            console.log('Client-side error');
            console.log(err);
        } else {
            console.log('Server-side error');
            console.log(err);
        }
    }
    );
    } catch (error) {
        console.log('error', error)
    }

}

此外,我还尝试添加

<EnableCors("http://localhost:4200", "*", "*")>

对控制器而言,但似乎无济于事。

如果您需要任何其他信息或有任何想法,请告诉我。 谢谢

1 个答案:

答案 0 :(得分:-2)

请添加有角度的应用程序

-“ Access-Control-Allow-Origin” =>'*'

-“ Access-Control-Allow-Methods” =>'GET,POST,PATCH,DELETE,PUT,OPTIONS',

-“ Access-Control-Allow-Headers” =>'来源,内容类型,X-Auth-令牌,内容类型',

请参考链接" Enable CORS "

相关问题