React本地测试 - 解决跨域问题_react 本地使用ip域名,请求测试域名跨域

写在前面：博主是一只经过实战开发历练后投身培训事业的“小山猪”，昵称取自动画片《狮子王》中的“彭彭”，总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域，如今终有小成，愿将昔日所获与大家交流一二，希望对学习路上的你有所助益。同时，博主也想通过此次尝试打造一个完善的技术图书馆，任何与文章技术点有关的异常、错误、注意事项均会在末尾列出，欢迎大家通过各种方式提供素材。

• 对于文章中出现的任何错误请大家批评指出，一定及时修改。
• 有任何想要讨论和学习的问题可联系我：zhuyc@vip.163.com。
• 发布文章的风格因专栏而异，均自成体系，不足之处请大家指正。

React本地测试 - 解决跨域问题

本文关键字：React、测试、跨域

一、问题描述

最近使用React进行前端界面开发，然后进行接口测试。由于是前后端分离的项目，所以自己先用了一些Mock Server工具来代替后端的接口数据返回，这样可以比较快速的组织出页面，最后只要完成实际接口的对接就可以了。但是一般对于跨域问题的解决都是在服务端添加相应的配置，这里将介绍如何在React项目中单独解决跨域问题。

二、产生原因

之前对于跨域问题并没有仔细的研究，稍微查了一些资料，一并记录下来。跨域问题是由于浏览器的同源策略【Same-Origin Policy】导致的，与具体使用什么技术无关。
同源策略是一种浏览器安全机制，旨在防止在不同源（域名、协议、端口）之间进行恶意的数据访问。同源策略要求网页中的脚本只能访问同源下的资源，而不能直接访问其他源的资源。当我们在运行一些前后端分类的项目时，通常前端和后端服务都运行在不同的端口，这时就会造成跨域。
当浏览器发起跨域请求时，它会发送一个预检请求（OPTIONS请求），该请求用于询问服务端是否接受来自不同源的请求。服务端可以通过响应头中的CORS（跨域资源共享）策略来控制是否允许跨域请求。如果服务端没有正确配置CORS策略，浏览器将拒绝跨域请求。

三、解决方案

我的React运行在localhost:3000上，后端服务运行在localhost:2000上，基于此前提进行配置。

1. package.json

在文件末尾添加如下内容，注意拼接逗号：

    "proxy": "http://localhost:2000"
1

2. setupProxy.js

在src下新建一个setupProxy.js文件，项目启动时会自动读取。

编辑文件前可以先安装需要的依赖，也可以根据提示安装：

npm install http-proxy-middleware
1

在文件中编写如下内容，这会在请求相应接口时代理到需要的接口地址：

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

module.exports = function(app) {
    app.use(
        '/user/selectOne',
        createProxyMiddleware({
            target: 'http://localhost:2000',  // 后端接口的地址
            changeOrigin: true,
        })
    );
};
1
2
3
4
5
6
7
8
9
10
11

这样的好处是可以精确的指定每一个接口，不会影响路由跳转，但是如果接口很多就比较繁琐，可以写一个方法进行遍历：

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,
      })
    );
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

这样，我们每次只需要在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;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

扫描下方二维码，加入CSDN官方粉丝微信群，可以与我直接交流，还有更多福利哦~