本文介绍了Angular 2 对预检请求的响应未通过访问控制检查:没有“Access-Control-Allow-Origin"标头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是 Angular2 的新手.我正在尝试将 POST 方法调用到我的 .net 核心 API.它与 Postman 一起工作正常.但是当我从我的 angular 2 服务调用它时,它给出了一个错误.

这是我的 api.service.ts

import { Injectable } from '@angular/core';从'../../../environments/environment'导入{环境};从'@angular/http'导入{标题,Http,响应,URLSearchParams};从 'rxjs/Rx' 导入 { Observable };导入 'rxjs/add/operator/map';导入 'rxjs/add/operator/catch';从'./jwt.service'导入{JwtService};@Injectable()导出类 ApiService {构造函数(私有 http: Http,私有 jwtService:JwtService) {}私有 setHeaders(): 标题 {const headersConfig = {'内容类型':'应用程序/json','接受':'应用程序/json','访问控制-允许-来源':'*'};如果 (this.jwtService.getToken()) {headersConfig['Authorization'] = `Token ${this.jwtService.getToken()}`;}返回新标题(headersConfig);}post(path: string, body: Object = {}): Observable

.net 核心 API 方法

解决方案

这是 CORS 问题.发生这种情况是因为您试图从不同的主机请求资源.您的 API 需要正确响应这些 OPTIONS 请求,否则浏览器将阻止该请求.

https://developer.mozilla.org/en-US/文档/Web/HTTP/CORS

邮递员没有实施 CORS 保护,因此您的请求在那里可以正常工作.

如果您的后端要在生产中的同一台主机上运行,​​您还可以使用 webpack/angular cli 的代理支持:https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

I'm new to Angular2. And I'm trying to call POST method to my .net core API.It's working fine with Postman.But when I call it from my angular 2 service it gives an error.

This is my api.service.ts

import { Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';
import { Headers, Http, Response, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { JwtService } from './jwt.service';

@Injectable()
export class ApiService {
  constructor(
    private http: Http,
    private jwtService: JwtService
  ) {}

  private setHeaders(): Headers {
    const headersConfig = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': '*'
    };

    if (this.jwtService.getToken()) {
      headersConfig['Authorization'] = `Token ${this.jwtService.getToken()}`;
    }
    return new Headers(headersConfig);
  }

  post(path: string, body: Object = {}): Observable<any> {

    return this.http.post(
      `${environment.api_url}${path}`,
        JSON.stringify(body),
        { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

body values

.net core API mothod

解决方案

That's a CORS issue. It happens because you are trying to request a resource from a different host. Your API needs to answer those OPTIONS requests properly otherwise the browser is going to block the request.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

CORS protection isn't implemented in postman so your request works fine there.

Edit: You can also use webpack / angular cli's proxy support if your backend is going to run on the same host in production:https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

这篇关于Angular 2 对预检请求的响应未通过访问控制检查:没有“Access-Control-Allow-Origin"标头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 22:34
查看更多