sunshine
管理员
管理员
  • 最后登录2023-10-30
  • 发帖数170
  • 社区居民
阅读:11285回复:0

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) =>{
            console.log(response);
            this.productList = response.data;
          }).catch((error)=>{
           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) =>{
            console.log(response);
            this.productList = response.data;
          }).catch((error)=>{
           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
游客


返回顶部

公众号

公众号