vue中post请求变options请求

楼主^#

更多发布于：2018-11-19 11:06

描述：
   原本使用vue中的代理跨域，post请求正常.
   然后，取消post请求，在服务器端(node)，使用cors来解决跨后问题
问题：
   在设置cors来跨域后，post请求变成了options请求，并且，提示error：
Access to XMLHttpRequest at 'http://192.168.1.229:8888/productList.do' from origin 'http://localhost:63342' has been blocked by CORS policy: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
可查看问题原因的具体描述：https://blog.csdn.net/xuedapeng/article/details/79076704
代码如下：

this.$axios.post("http://192.168.1.229:8888/productList.do",{username:'wawawahahha',pwd:"123456"}).then((response) =&gt;{
            console.log(response);
            this.productList = response.data;
          }).catch((error)=&gt;{
           console.log(error);
        });

解决方案：
给请求添加一个请求头
代码如下：

let config = {
          headers : {
            'Content-Type':'application/x-www-form-urlencoded'
          },
        };
///static/product.json
        this.$axios.post("http://192.168.1.229:8888/productList.do",{username:'wawawahahha',pwd:"123456"},config).then((response) =&gt;{
            console.log(response);
            this.productList = response.data;
          }).catch((error)=&gt;{
           console.log(error);
        });

解析：

报文变成了OPTION包，而不是POST请求报文。
原来这是跨域访问的一种安全检查机制：
首先发起OPTION对目标服务器进行测试，看看这种访问是否安全
在头部字段会出现下面三个
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with
Origin: null（跨域Ajax去掉X-Requested-With，带上这个）
当收到服务器端的响应允许后才发送正式POST或者GET请求。

这叫做预检报文，如何不触发预检报文，有三个同时满足的必备条件（三项均成立才行）：
1. 只能是Get、Head、Post方法
2. 除了浏览器自己在Http头上加的信息（如Connection、User-Agent），开发者只能加这几个：Accept、Accept-Language、Content-Type……
3. Content-Type只能取这几个值：
application/x-www-form-urlencoded
multipart/form-data
text/plain

参考：https://www.cnblogs.com/KevinGeorge/p/7701153.html

喜欢0

发帖回复

« 返回列表

您需要登录后才可以回帖，登录或者注册

返回顶部

公众号

vue中post请求变options请求

最新喜欢：