Question

我正在使用.Net Core来构建API，并且使用Angular Web应用程序来使用这些API。两者都在本地使用不同的端口托管。

.Net Core API： http://localhost:5000

Angular Web App： http://localhost:4444

这是我在Angular中的服务方法

export class AdvertisementService {
  // Define API 
  apiURL = environment.apiUrl;

  constructor(private http: HttpClient) {}

  // Configure HTTP Options
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  // HttpClient API get() method => Fetch Advertisement List.
  getAdvertisements(): Observable<Advertisement[]> {
    return this.http.get<Advertisement>(this.apiURL + '/Advertisements')
                    .pipe(retry(1),catchError(this.handleError))
  }

  // HttpClient API post() method => Create Advertisement
  createAdvertisement(advertisement): Observable<Advertisement> {
    return this.http.post<Advertisement>(this.apiURL + '/Advertisements', JSON.stringify(advertisement), this.httpOptions)
    .pipe(retry(1),catchError(this.handleError))
  }  

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

当我通过Angular App调用API方法时，会引发以下错误：

在以下位置访问XMLHttpRequest 原产地的“ http://localhost:5000/api/Advertisements” “ http://localhost:4444”已被CORS政策阻止：请求标头字段的内容类型不允许飞行前响应中的Access-Control-Allow-Header。

如下所示，我在.Net Core中的 ConfigureServices 方法中添加了CORS：

 services.AddCors(options =>
 {
     options.AddPolicy(MyAllowSpecificOrigins,
     builder =>
     {
         builder.WithOrigins("http://localhost:4444");
     });
 });

Answer 1

在启动时

在ConfigureServices方法中添加services.AddCors();，在configure.cs中添加app.UseCors(x => x.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());

Answer 2

在WebApi.config中启用CORS：

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Answer 3

按照此link中提到的解决方案，以下方法对我有用。

SELECT prod_cat_info.prod_subcat, AVG(Transactions.total_amt)
FROM Transactions INNER JOIN
    prod_cat_info
    ON Transactions.prod_cat_code = prod_cat_info.prod_cat_code AND
        Transactions.prod_subcat_code = prod_cat_info.prod_sub_cat_code
GROUP BY prod_cat_info.prod_subcat
WHERE Transactions.prod_cat_code IN (
    SELECT TOP 5 Transactions.prod_cat_code
    FROM Transactions
    GROUP BY Transactions.prod_cat_code
    ORDER BY SUM(Transactions.Qty) DESC
    )
GROUP BY prod_cat_info.prod_subcat

CORS政策已阻止从原始位置访问API方法

3 个答案: