被 ionic-5 中的 CORS 策略阻止 angular

Question

我遇到了这个错误，有人可以指导我吗？我已经在 proxy.conf.json 中进行了配置我在 user.service.ts

中设置了 header 和基数 url

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { map } from 'rxjs/operators';


@Injectable()
export class UserService {

    constructor(public http: Http) { }

    yaho() {
        const headers = new Headers();
        headers.append('Access-Control-Allow-Origin', '*');
        // headers.append('Access-Control-Allow-Credentials', 'true');
        headers.append('Access-Control-Allow-Headers', 'Content-Type');

        headers.append('Access-Control-Allow-Methods', 'GET, POST');


        headers.append('Content-Type', 'application/json');
        headers.append('appKey', '4d71e017-6896-477b-bb0d-93bb9e6d3224');
        const options = new RequestOptions({ headers });
        const baseURL = 'abx/gas.json';
        console.log('Base url---->' + baseURL);
        const url = 'localhost:8081/abx/gas.json';
        return this.http.get(url, options)
            .pipe(map(res => res.json()));
    }
}

Answer 1

您必须将后端配置为接受 CORS，而不是前端

（您尝试添加的 headers 应该添加到后端而不是 angular 应用）

Answer 2

您无法通过尝试在客户端中启用 CORS 来解决您的问题。这是 http 的一般/基本特征，而不是 ionic 或 angular 的特定特征。如果您无法更改后端，那么您可以使用代理。

"The Ionic CLI introduced the ability to have a proxy server issue requests for you to get around any CORS issues you may have. Since the server is sending a fresh request to your destination, there will be no origin and therefore, no CORS needed"

如所述here and example repo here

我假设您是如何尝试处理 CORS 请求而不在后端启用它的。

请注意"CORS is only an issue when we are running or testing our app when running ionic serve or ionic run -l."

设置代理：

在我们的 ionic.project

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
}

替换要设置为代理服务器的端点 URLS
运行 ionic serve

除了这个"The easiest way to handle the CORS problem is to ultimately ask your API provider to allow all hosts"

被 ionic-5 中的 CORS 策略阻止 angular

blocked by CORS policy in ionic-5 angular

android

angular

ionic5