离子HTTP客户端帖子请求跨源错误，但适用于Postman [英] Ionic HTTP client post Request cross origin Error , But works on Postman

问题描述

我正在尝试在我的Ionic应用程序中执行以下发布请求，在该应用程序中出现以下错误

I am trying to perform the following post request in my ionic app , where I get following error

已被CORS政策阻止:对预检请求的响应没有通过访问控制检查:否'Access-Control-Allow-Origin'标头出现在请求的资源上.

但是，当在同一台PC上使用邮递员执行相同的请求时，它可以完美地工作.感谢您的宝贵帮助.

But same request works perfectly when performed using postman in the same PC. Appreciate your valuable help.

邮递员回应

离子HTTP发布请求

import {
    HttpClient,
    HttpHeaders
} from '@angular/common/http';

constructor(public menuCtrl: MenuController, private http: HttpClient, private router: Router, private alertController: AlertController,
    public loadingController: LoadingController) {
    window.sessionStorage.setItem("ip", "myapi.com");
}


let authorizationData = 'Basic ' + btoa(this.username.trim() + ':' + this.password.trim());
window.sessionStorage.setItem("auth", authorizationData);

const httpOptions = {
    headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json; charset=utf-8',
        'Authorization': authorizationData
    })
};

console.log(authorizationData);
this.present();


this.http.post('https://' + window.sessionStorage.getItem('ip') + '/OffsiteAtmMonitoring/login/submit', {}, httpOptions)
    .subscribe(
        data => {


            window.sessionStorage.setItem("name", data["name"]);
            window.sessionStorage.setItem("firstname", data["firstname"]);
            window.sessionStorage.setItem("lastname", data["lastname"]);
            window.sessionStorage.setItem("username", data["username"]);
    }

推荐答案

您的请求在邮递员中有效，因为它不发送飞行前请求.您应该阅读 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS ，否则我会在问题的第二部分中简要地简要介绍cors的工作原理，也许您会发现它很有用. 405(不允许使用的方法)，并被CORS阻止政策

Your request works in postman because it doesn't send pre-flight requests. you should read https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS or else I really briefly explain how cors works at a high level in the second part of the question here, maybe you will find it useful. 405 (Method Not Allowed) and blocked by CORS policy

几乎肯定有服务器问题，但是您确实有一些不需要的标头.

There is almost certainly a server issue, but you do have some headers that aren't needed.

const httpOptions = {
    headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json; charset=utf-8',
        'Authorization': authorizationData
    })
};

'Access-Control-Allow-Origin':'*'这不是必需的.如果服务器允许来自所有来源的请求，则服务器应对此做出响应.

'Access-Control-Allow-Origin': '*' This is not required. your server should respond with this if it is allowing requests from all origins.

如果您要发送验证数据，则服务器还需要使用 Access-Control-Allow-Credentials:true 进行响应.

The server also needs to respond with Access-Control-Allow-Credentials: true if you are sending authenticating data.

没有办法将其固定在我认为可以接受的客户端(离子)方面.您可以使用cors代理，但我认为这不是可接受的解决方法

There is no way to fix it on the client (ionic) side that I would deem acceptable. You could use a cors proxy but this is not an acceptable fix in my opinion

也许有一些方法可以进行黑客修复，以防止Cors请求在android和ios上发送并避免使用代理，不过我不确定.我的建议是尽可能正确地配置要连接的API.这是可靠地连接到不同来源的API的唯一方法

There may be ways to do a hack fix to prevent Cors requests being sent on android and ios and avoid using a proxy, I am unsure of this though. My advice is to correctly configure the API you are connecting to if at all possible. It is the only way to reliably connect to an API from a different origin

这篇关于离子HTTP客户端帖子请求跨源错误，但适用于Postman的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！