zoukankan      html  css  js  c++  java
  • AJAX遇到的问题

    1.POST数据出现4开头错误,这些都是客户端错误

    415:Unsupported Media Type

    对于当前请求的方法和所请求的资源,请求中提交的实体并不是服务器中所支持的格式,因此请求被拒绝。

    解决:

    $$.ajax({
        contentType: 'application/json;chartset=UTF-8';//设置请求内容类型
    })

    400:Bad Request,前端请求的格式错误

    (1)语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求。

    (2)请求参数有误。

    在POST请求下需要对数据对象转成字符串

        $$.ajax({
                url: url,
                method: 'POST',
                contentType: 'application/json;chartset=UTF-8',
                dataType: 'json',
                data: JSON.stringify(
                    data
                ),//需要POST请求的类型的,数据对象转成字符串格式
                success: function(data) {}
             });

    2.AJAX设置headers来跨域

    $$.ajax({
            url: url,
            headers: { 
            authorization: loginToken 
        },
            method: 'POST',
            contentType: 'application/json;chartset=UTF-8',
            dataType: 'json',
            data: JSON.stringify(
                data
            ),//需要POST请求的类型的,数据对象转成字符串格式
            success: function(data) {}
    });
    

    具体前端和后端实现过程:

    (1)服务端:设置响应头
    header('Access-Control-Allow-Origin:*'); //支持全域名访问,不安全,部署后需要固定限制为客户端网址
    header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 动作
    header('Access-Control-Allow-Headers:x-requested-with,content-type'); //响应头 请按照自己需求添加。

    (2)客户端前端:设置headers自定义参数的时候的 "预请求" (也就是我们为什么总是看到两次请求的地方)
    A 第一步:发送预请求OPTIONS请求。此时,服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可,不用返回任何内容信息。
    B 第二步:服务器accepted第一步请求后,浏览器自动执行第二步发送真正的请求

    3. 接口给了成功回调的数据,但是进了error回调

    接口给了成功回调的数据,但是进了error回调,导致,访问接口成功的callback无法执行。初步觉得 JSON 格式不对,但是看了Charles 其实是对的

    JSON格式

    • 1)键名称:用双引号括起

    • 2)字符串:用使用双引号括起

    • 3)数字,布尔类型不需要使用双引号括起 

     

  • 相关阅读:
    浏览器(WebRTC) 如何获取音视频流
    在linux shell中,用$#表示传递进来的参数个数
    Vi很省力
    Factorial! You Must be Kidding!!!(ICPC冬令营集训题目)
    Pig-Latin(ICPC冬令营集训题目)
    C# .net
    编辑器
    VC 和 VS 区别
    Visual Studio和Visual Studio Code差异篇
    IDE 与 编辑器的对比
  • 原文地址:https://www.cnblogs.com/10manongit/p/12925772.html
Copyright © 2011-2022 走看看