离子 - 被 CORS 政策阻止：没有“访问控制允许来源”答案

【问题标题】：Ionic - blocked by CORS policy: No 'Access-Control-Allow-Origin'离子 - 被 CORS 政策阻止：没有“访问控制允许来源”
【发布时间】：2020-08-23 10:57:20
【问题描述】：

我创建了一个连接到 API 网站的 Ionic 应用程序，在我启用 Under Attack Mode 之前，我已将我的网站连接到 CloudFlare 以进行保护，请求完美发送且没有任何错误，但现在它在控制台中显示错误：

Access to XMLHttpRequest at 'https://mywebsite.org/api/mobile/news?pageSize=15&currentPage=1&language=undefined' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

后端是一个烧瓶微服务，我也在启用 cors 角色，

cors.init_app(app, resources={r"https://mywebsite.org/api/*": {"origins": "https://mywebsite.org"}})

每次我从应用程序发送获取请求时，我也会在标题中添加一个 Access-Control-Allow-Origin：

let headers = new HttpHeaders({
    "Access-Control-Allow-Origin":"https://mywebsite.org/",
    "origin":"https://mywebsite.org/"
});

@Injectable({
    providedIn: 'root'
})
export class DataApiService {

    private apiUrl: string = 'https://mywebsite.org/api';


    constructor(
    private http: HttpClient,
    private translate: TranslateService
    ) { }

    // Get news
    apiRequest(url: string, params?:any){

    const apiUri = `${this.apiUrl+url}`;

    if(params){
        params.language = this.translate.getDefaultLang();
    }

    return this.http.get(apiUri, { headers: headers, params: params }).pipe(
        delay(
        500
        ),
        map(
        (res:any) => {
            return res
        }
        )
    )
    }
}

请帮忙。

【问题讨论】：

标签： angular typescript cors ionic4

【解决方案1】：

看这个

https://ionicframework.com/docs/troubleshooting/cors

你必须添加主机而不是 localhost (ionic serve --host test.test.co)

然后去你的本地磁盘

移到这里 C:\Windows\System32\drivers\etc

然后修改你的主机文件

127.0.0.1 test.test.co

对不起，英语不好

希望对你有帮助

【讨论】：

某些浏览器在 localhost 时会阻止 cors 请求
我会看到），chrome 正在以某种方式破坏请求，没关系，你的回答帮助了我，谢谢）