Question

我有一个web api应用程序，我计划将其用作我的身份验证服务。

我的前端角度为2，将调用此服务。我计划将我的前端和服务放在不同的域上。

我需要一些方向来解决这个错误。

目前我正在使用Microsoft.Owin.Cors来处理我的角色

 public void Configuration(IAppBuilder app)
    {
        HttpConfiguration config = new HttpConfiguration();

        ConfigureOAuth(app);

        WebApiConfig.Register(config);
        app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
        app.UseWebApi(config);


        //Rest of code is here;
    }

正如您所看到的，我已将其设置为AllowAll，但我仍然遇到问题。我的UI域目前为http://localhost:3000/login，我的web-api为https://localhost:44300/

当我尝试登录时，我得到了

XMLHttpRequest无法加载https://localhost:44300//token。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:3000”访问。响应的HTTP状态代码为400。

UI

 login(loginDetails:ILogin):Observable<string>{
    let headers = new Headers();
    let data="grant_type=password&username=" + loginDetails.username + "&password=" + loginDetails.password;
    headers.append('Content-Type', 'application/json');

    return this._http.post(
        `${baseUrl}/token`, 
        data, 
        { headers }
    )
    .map(res => res.json())
    .map((res) => {
        if (res.success) {
            localStorage.setItem('auth_token',JSON.stringify({ token: res.access_token, userName: loginDetails.username }));            
        }
        this.loggedIn = true;
        return res.success;
    })
    .catch(this.handleError);
}

如何解决上述错误，当我推出时如何配置我的网络API以仅允许来自我的ui的接受请求（如何收紧角色）

我已经解决了我的第一个问题。通过改变 headers.append('Content-Type', 'application/json'); =＆gt; headers.append('Content-Type', 'application/x-www-form-urlencoded');

我现在可以获得我的令牌了。我仍然需要弄清楚如何限制访问。

对预检请求的响应不会通过访问控制Angular2

0 个答案: