Angular 2对预检请求的响应未通过访问控制检查:没有'Access-Control-Allow-Origin'标头

Question

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

这是我的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());
  }

身体价值

.net核心API方法

Answer 1

这是一个CORS问题.之所以发生这种情况,是因为您尝试从其他主机请求资源.您的API需要正确回答这些OPTIONS请求,否则浏览器将阻止请求.

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

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

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