React 采用Fetch方式发送跨域POST请求

最新推荐文章于 2024-08-08 09:02:17 发布

小太阳发光

最新推荐文章于 2024-08-08 09:02:17 发布

阅读量7.3k

点赞数

本文链接：https://blog.csdn.net/weixin_38283270/article/details/78616268

版权

这篇博客介绍了如何在React应用中利用Fetch API发送跨域POST请求。通过设置'Content-Type'为'application/x-www-form-urlencoded'，并配置mode为'cors'，实现了与服务器的交互。同时，提到了fetch-npm-node.js文件的内容，用于处理以'//'开头的URL，并全局替换fetch相关对象。

摘要由CSDN通过智能技术生成

主实现类：
import fetch from ‘isomorphic-fetch’;

export default async function post(url,method,params) {
//Content-Type: ‘application/json’
let response = await fetch(url,{method: method,headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
}, body: JSON.stringify(params),mode:”cors”});
let data;
if (response.status >= 200 && response.status < 300) {
data = await response.json();
}else{
data = {“retCode”:false,”retMesg”:”服务器异常(“+response.status+”)”};
}
alert(JSON.stringify(data.data)+”1111”);
//e(data);
return data;
}

fetch-npm-node.js中的内容：
“use strict”;

var realFetch = require(‘node-fetch’);
module.exports = function(url, options) {
if (/^\/\//.test(url)) {
url = ‘https:’ + url;
}
return realFetch.call(this, url, options);
};

if (!global.fetch) {
global.fetch = module.exports;
global.Response = realFetch.Response;
global.Headers = realFetch.Headers;
global.Request = realFetch.Request;
}
有不懂的地方欢迎沟通！