Question

我试图制作$ http.post请求，但我遇到以下错误：

XMLHttpRequest无法加载https://mipage.com/examplephp。请求标题字段在预检响应中，Access-Control-Allow-Headers不允许使用Content-Type。

如果我将 $ http.post 更改为 $ http.get 请求使用JSON的服务器响应，那么..我认为CORS没问题。我还在离子项目中加了代理。

这是我的功能：

function obtenerSesion() {
        debugger;
        return $http.post(iniciarSesionUrl,
                 {params: {username: 'prueba123',password: 'prueba123'}}).then(function(response) {
            canchas = response.data;        
            return canchas;
        })
        .catch(generarError);
    }

服务器也返回带有或不带参数的JSON，因为我认为可能是问题所在 $ _POST [＆＃34;用户名＆＃34;]; $ _POST [＆＃34;密码＆＃34;];

但不是。我硬编码了服务器中的数据，所以......问题出在Angular JS中

你能帮我解决我的问题吗？谢谢！

Answer 1

发送POST请求的服务器需要在其响应中包含 Access-Control-Allow-Headers 。将它们输入您的客户端无效。

由服务器指定它是否接受交叉原始请求，因此如果客户端允许CORS，则客户端无法自行决定。

此处解释thread

Answer 2

XMLHttpRequest无法加载https://mipage.com/examplephp。请求   标题字段不允许使用Content-Type   预检响应中的Access-Control-Allow-Headers。

如果我将$ http.post更改为$ http.get请求服务器响应   JSON，所以......我认为CORS不是问题。我也放了一个代理   离子项目。

<强>解释：

当你从$ http.get（）发出一个HTTP GET请求时，它们被追加到querystring中，并且由于请求没有消息体，因此角度httpProvider会删除请求的Content-Type标头。

所以，你的$ http.get params in querystring：

username=prueba123&password=prueba123

否则来自$ http.post（）的HTTP POST请求传递params对象，它们在json中解析并插入到请求的消息体中，然后httpProvider添加http请求头Content-Type：application / JSON。

所以，您的$ http.post请求消息正文中的参数：

{"username":"prueba123","password":"prueba123"}

这是通过角度httpProvider的默认transformRequest函数
完成的
不知何故，你违反了CORS政策，那么你必须配置你的api web服务器或你的api后端来处理违反CORS策略的行为，特别是你的错误是由于Access中缺少内容类型引起的Control-Request-Headers响应字段。

可能的解决方案（在您的具体情况下）

如果从带有离子框架的本地运行应用程序，则需要配置ionic.config.json文件并添加托管应用程序的相同地址和端口的代理，这样您就不会违反CORS政策。

示例：

{ "name": "example project", "app_id": "11ffxxxx", //etc etc.. "proxies": [ { "path": "/api", "proxyUrl": "http://192.168.1.152:9083/api" } ] }

最后在您的角度应用程序中，您需要在从本地运行时正确配置api端点：

function obtenerSesion() { debugger; return $http.post("/api", {params: {username: 'prueba123',password: 'prueba123'}}).then(function(response) { canchas = response.data; return canchas; }) .catch(generarError); }

我建议您使用javascript task runner（gulp，grunt）自动执行此过程

$ http.post没有在AngularJS中使用

2 个答案: