html跨域post请求,使用fetch跨域POST请求

首先，直接上代码：

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