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

html跨域post请求,使用fetch跨域POST请求相关推荐

fetch 跨域请求
CORS cors是"Cross-Origin Resource Sharing"的简称,是实现跨域的一种方式,相对于其他跨域方式,比较灵活,而且不限制发请求使用的method,以 ...
fetch ajax cros,由 Fetch 跨域看 CORS
最近在看 react 获取服务器数据时, 看到了一新的 API fetch, 上手来用了用,觉得十分好用.但是使用的过程中遇到了一些问题,还是决定整体的记录下. fetch 类似于 Ajax, 区别自 ...
跨域请求及解决跨域的方法
目录跨域同源策略如何解决跨域 JSONP 跨源资源共享(CORS) HTTP 响应首部字段 Access-Control-Allow-Origin Access-Control-Expose-H ...
springMVC获取异步请求的参数,返回异步请求数据(json),跨域访问简单了解,文件上传,与Restful风格
springMVC获取异步请求的参数 JQuery发送异步请求回顾 <a href="javascript:void(0);" id="testAjax" ...
php跨域请求解决方案_swoft2 -跨域与中间件详解
本方案用于开发环境,在生产环境不建议使用,生产环境可以使用 nginx 的反向代理一.什么是跨域? 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS ...
ajxs跨域 php_PHP项目中是如何处理Ajax请求与Ajax跨域的
PHP项目中是如何处理Ajax请求与Ajax跨域的发布时间:2020-12-14 16:35:47 来源:亿速云阅读:98 这期内容当中小编将会给大家带来有关PHP项目中是如何处理Ajax请求与A ...
java httpclient 跨域_13、HttpClient服务器跨域请求
1 回调 1.1 回调函数 1.1.1 回调的原理图说明:在架构设计中,回调的机制经常会被使用,课下自行学习. 1.2 JSON的数据结构 1.2.1 JSON官网介绍 1.2.2 Object格式 ...
中止请求和超时跨域的HTTP请求认证方式 JSONP
中止请求和超时一个栗子在上传多少秒以后直接终止请求 // 发起HTTP GEt请求获取指定URl的内容 // 如果响应成功到达,将会传入responseText给回调函数 // 如果响应在timeo ...
Cors跨域(一)：深入理解跨域请求概念及其根因
Talk is cheap. Show me the money. 前言你好,我是YourBatman. 做Web开发的小伙伴对"跨域"定并不陌生,像狗皮膏药一样粘着几乎每位同学 ...

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

html跨域post请求,使用fetch跨域POST请求相关推荐

最新文章

热门文章