首先,直接上代码:

var url='http://localhost/test';
fetch(url, {
    method: "POST",
    mode: "cors",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    body: 'key1=value2&key2=value2'
    }).then(function(res) {
        console.log("Response succeeded?", JSON.stringify(res.status));
        console.log(JSON.stringify(res));
    }).catch(function(e) {
    console.log("fetch fail", JSON.stringify(e));
});

亲测成功!

如果没有成功,请继续往下看。

其实这段代码写出来之后,在网上找找也找到了类似的正确的代码,但也有很多的错误代码,所以写的时候花费了很大的精力。试过正确的,也试过错误的,但都没有成功提交数据。原因就是虽然我们用cors提交了跨域请求,但服务器端不接收跨域请求。这时候就需要在服务器端添加header,允许跨域。由于我们项目用的是laravel,所以在写跨域的时候,先写了laravel添加cors跨域请求中间件的博客,详情请参见《 Laravel增加CORS中间件完成跨域请求》。

跨域是做WEB经常遇到的一个问题,一方面我们想要提高网站的安全性,一方面因为业务需要,又必须使用跨域,所以这就需要程序员们不断的努力了。而jsonp就是大家努力的结果之一。

Ajax中POST跨域请求想必大家都知道怎么做,没错,就是jsonp。jsonp是一种以GET方式发送POST请求并实现跨域请求的方法,用法也很简单,请自行百度。

而与jQuery相比,fetch方法与jQuery.ajax()的主要区别在于:

  • fetch()方法返回的Promise对象并不会在HTTP状态码为404或者500的时候自动抛出异常,而需要用户进行手动处理
  • 默认情况下,fetch并不会发送任何的本地的cookie到服务端,注意,如果服务端依靠Session进行用户控制的话要默认开启Cookie