CORS 问题 Angular4 & c# web api

Posted 2023-03-04

【中文标题】CORS 问题 Angular4 & c# web api

【英文标题】：CORS issue Angular4 & c# web api

【发布时间】：2019-01-03 09:05:21

【问题描述】：

我有一个在 http://localhost:59543/ 上运行的 Web API，为此我已通过将以下内容添加到 Web.config 来启用 CORS

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>

我有一个在 http://localhost:4200/ 上运行的 angular 4 项目。我使用以下代码发出 HTTP 请求

登录服务

@Injectable()
export class LoginService extends BaseService 

    request: Http;

    constructor(request: Http) 
        super(request);
        this.request = request;
    

    postLogin(body: Object): Observable<any> 
        var options = this.options;
        options.method = "POST";
        return this.request.post(AppSettings.apiURL + "api/Login", body, options)
            .map(this.extractData)
            .catch(this.handleError);
    

基础服务

@Injectable()
export class BaseService 

    headers: Headers;
    options: RequestOptions;

    constructor(private http: Http) 

        this.headers = new Headers();

        let token: string = localStorage.getItem("TOKEN");

        if (token != undefined)
            this.headers.append("AUTH_TOKEN", token);

        this.options = new RequestOptions( headers: this.headers );
    

    public extractData(res: Response) 
        let body = res.json();
        return body || ;
    

    public handleError(error: Response | any) 
        return Observable.throw(error.message || error);
    

问题

当我为 HTTP 请求设置标头时

this.headers.append("AUTH_TOKEN", token);

我收到以下错误

api/Login: 1 加载资源失败：服务器响应 405 状态（方法不允许）

:4200/#/login:1 加载失败http://localhost:59543/api/Login: 预检响应包含无效的 HTTP 状态代码 405。

但是当我删除标题时它可以工作。任何建议或指导将不胜感激。

【问题讨论】：

405 表示您没有授权您的 HTTP 动词。否则，您没有授权 API 上的 POST 请求。

由于这不是 Angular 问题，我将删除该标签，因为您编写的任何 Angular 代码都无法解决此问题。

我认为当我从请求中删除标头时，请求工作时，角度代码可能存在问题。 @trichetriche

如您所见，请求进展顺利，您的服务器正在回答错误。如果删除标头使其工作，则意味着您的服务器配置错误，因为无论哪种方式，Angular 都完成了它的工作。

感谢您为我指明了正确的方向，关于在哪里查看服务器有什么建议吗？ @trichetriche

【参考方案1】：

你应该传递令牌类型的令牌，例如，

this.headers.append("Authorization", "bearer "+token);

这里，bearer 是您的令牌类型。这将是您设置的另一个默认值。