美文网首页
vue项目中的请求问题

vue项目中的请求问题

作者: 寒眼 | 来源:发表于2018-09-03 10:03 被阅读136次

    axios post会发送2次请求 , 第一次为Options options不带参数 第二次为自己设置的post请求 带参

    这段为引用 https://blog.csdn.net/qq_30378229/article/details/78576625
    跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
    也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求。
    关于这个问题,需要在后台进行设置,允许options请求,不然你的请求就会受到影响,后台并作出判断,如果请求方式为options,告诉它可以通讯,其他直接什么都不做。
    以下是PHP做设置内容
    header(“Access-Control-Allow-Origin:*”);
    header(“Access-Control-Allow-Headers:content-type”);
    header(“Access-Control-Request-Method:GET,POST”);
    if(strtoupper($_SERVER[‘REQUEST_METHOD’])== ‘OPTIONS’){
    exit;
    }

    content-type 问题 配置好content-type 与后台调接口 传递参数
    1 application/x-www-form-urlencoded
    //例子
    //b=曹,a=1
    POST HTTP/1.1(CRLF)
    Host: www.example.com(CRLF)
    Content-Type: application/x-www-form-urlencoded(CRLF)
    Cache-Control: no-cache(CRLF)
    (CRLF)
    b=%E6%9B%B9&a=1(CRLF)
    //这里b参数的值"曹"因为URL转码变成其他的字符串了
    2 application/json
    //例子
    //传递json
    POST HTTP/1.1(CRLF)
    Host: www.example.com(CRLF)
    Content-Type: application/json(CRLF)
    Cache-Control: no-cache(CRLF)
    Content-Length: 24(CRLF)
    (CRLF)
    {
    "a":1,
    "b":"hello"
    }

    if( config.method === "post" ){
        config.headers = {
            'Content-Type': 'application/json;charset=UTF-8',
            'token': store.state.token,
        }
        // config.data = qs.stringify( config.data );
    }else{
        config.headers = {
            'Content-Type': 'application/json;charset=UTF-8',
            'token': store.state.token,
        }
    }

    相关文章

      网友评论

          本文标题:vue项目中的请求问题

          本文链接:https://www.haomeiwen.com/subject/qccbwftx.html