手牵手学习react之如何封装请求及处理跨域(五)

手牵手学习react之如何封装请求及处理跨域(五)

1. 什么是跨域?

跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议、域名、端口有任何一个不同,都被当作是不同的域。之所以会产生跨域这个问题呢,其实也很容易想明白,要是随便引用外部文件,不同标签下的页面引用类似的彼此的文件,浏览器很容易懵逼的,安全也得不到保障了就。什么事,都是安全第一嘛。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操作其他域的页面对象或者使其他域的js能操作本域的页面对象(iframe之间)。

在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。

这里我们需要注意两点:

如果是协议和端口造成的跨域问题“前台”是无能为力的;
在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上(“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。)

2.如何处理跨域?

下载插件http-proxy-middleware

yarn add http-proxy-middleware

下载基于 promise 的 HTTP 库axios

yarn add axios

暴露配置项

npm run eject
//或者
yarn eject

注意:如果执行上述命令失败,配置项未展示,可能是项目在初始化时默认关联git仓库,我们需要提交修改,然后在执行则成功!

首先在src下创建setupProxy.js文件

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
app.use(
"/devApi",
createProxyMiddleware({
target: "http://www.web-jshtml.cn/api/react",
changeOrigin: true,
pathRewrite: {
"^/devApi": "",
},
})
);
};

注意:http-proxy-middleware更早版本引入const proxy = require("http-proxy-middleware"),这也是大部分会出错的地方!

配置好setupProxy.js文件后,查看start eject展示出来的config文件夹下面paths.js中setupProxy的路径

proxySetup: resolveApp('src/setupProxy.js'),

如果您也很顺利,到这跨域已经处理完毕 :)

3.如何封装请求?

创建request

import axios from "axios";

//创建实例
const service = axios.create({
baseURL: process.env.REACT_APP_API,
timeout: 5000,
});

//请求拦截
service.interceptors.request.use(
function (config) {
console.log(process.env.REACT_APP_API);
// 在发送请求之前做些什么
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
//响应拦截
service.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);

export default service;

注意:

process.env.REACT_APP_API等于"/devApi"
process.env.NODE_ENV可以获取当前环境是开发环境还是生产环境
REACT_APP_API变量定义在.env.development文件中

REACT_APP_API="/devApi"

注意:我们不仅可以创建.env.development来表示开发环境api,还可以创建.env.production来表示生产环境,程序会根据环境自动读取不同API

根据功能模块创建请求

import service from "../../src/utils/request";

/**
* 登录接口
*/

export function Login(data) {
return service.request({
url: "/login/",
method: "POST",
data,
});
}

组件调用

import { Login } from "../../api/account";

onFinish = (values) => {
Login(values)
.then((res) => {
message.success("登录成功");
console.log(res);
})
.catch((err) => {
console.log(err);
});
console.log("Received values of form: ", values);
};

惟愿山河无恙,国泰民安,幸哉~

gitHub地址,欢迎滴滴

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

手牵手学习react之如何封装请求及处理跨域(五)

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 手牵手学习react之如何封装请求及处理跨域(五)
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏