写在前面：博主是一只经过实战开发历练后投身培训事业的“小山猪”，昵称取自动画片《狮子王》中的“彭彭”，总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域，如今终有小成，愿将昔日所获与大家交流一二，希望对学习路上的你有所助益。同时，博主也想通过此次尝试打造一个完善的技术图书馆，任何与文章技术点有关的异常、错误、注意事项均会在末尾列出，欢迎大家通过各种方式提供素材。
- 对于文章中出现的任何错误请大家批评指出，一定及时修改。
- 有任何想要讨论和学习的问题可联系我：[email protected]。
- 发布文章的风格因专栏而异，均自成体系，不足之处请大家指正。
React本地测试 - 解决跨域问题
本文关键字：React、测试、跨域
一、问题描述
最近使用React进行前端界面开发，然后进行接口测试。由于是前后端分离的项目，所以自己先用了一些Mock Server工具来代替后端的接口数据返回，这样可以比较快速的组织出页面，最后只要完成实际接口的对接就可以了。但是一般对于跨域问题的解决都是在服务端添加相应的配置，这里将介绍如何在React项目中单独解决跨域问题。
二、产生原因
之前对于跨域问题并没有仔细的研究，稍微查了一些资料，一并记录下来。跨域问题是由于浏览器的同源策略【Same-Origin Policy】导致的，与具体使用什么技术无关。
同源策略是一种浏览器安全机制，旨在防止在不同源（域名、协议、端口）之间进行恶意的数据访问。同源策略要求网页中的脚本只能访问同源下的资源，而不能直接访问其他源的资源。当我们在运行一些前后端分类的项目时，通常前端和后端服务都运行在不同的端口，这时就会造成跨域。
当浏览器发起跨域请求时，它会发送一个预检请求（OPTIONS请求），该请求用于询问服务端是否接受来自不同源的请求。服务端可以通过响应头中的CORS（跨域资源共享）策略来控制是否允许跨域请求。如果服务端没有正确配置CORS策略，浏览器将拒绝跨域请求。
三、解决方案
我的React运行在localhost:3000上，后端服务运行在localhost:2000上，基于此前提进行配置。
1. package.json
在文件末尾添加如下内容，注意拼接逗号：
"proxy": "http://localhost:2000"
2. setupProxy.js
在src下新建一个setupProxy.js文件，项目启动时会自动读取。
编辑文件前可以先安装需要的依赖，也可以根据提示安装：
npm install http-proxy-middleware
在文件中编写如下内容，这会在请求相应接口时代理到需要的接口地址：
const {
createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/user/selectOne',
createProxyMiddleware({
target: 'http://localhost:2000', // 后端接口的地址
changeOrigin: true,
})
);
};
这样的好处是可以精确的指定每一个接口，不会影响路由跳转，但是如果接口很多就比较繁琐，可以写一个方法进行遍历：
const {
createProxyMiddleware } = require('http-proxy-middleware');
const proxyConfig = [
{
path: '/user/selectOne',
target: 'http://localhost:2000',
},
{
path: '/user/selectAll',
target: 'http://localhost:2000',
},
// 添加更多的代理规则
];
module.exports = function(app) {
proxyConfig.forEach(proxy => {
app.use(
proxy.path,
createProxyMiddleware({
target: proxy.target,
changeOrigin: true,
})
);
});
};
这样，我们每次只需要在proxyConfig中添加路径的映射就可以了，还是比较方便的。
3. service.ts
在请求接口时，不需要指定接口地址，而直接使用接口路径：
import axios from 'axios';
interface LoginParams {
username: string;
password: string;
}
interface LoginResponse {
status: number;
}
export const loginUser = async ({
username, password }: LoginParams): Promise<LoginResponse> => {
const response = await axios.get<LoginResponse>("/user/selectOne", {
params: {
username,
password,
},
});
return response.data;
};
扫描下方二维码，加入CSDN官方粉丝微信群，可以与我直接交流，还有更多福利哦~
