react前端设置代理服务器，解决跨域cookie问题

前言

在前端中，会经常使用 cookie 作为网络缓存方案，因此测试过程中也会出现跨域问题，因此cookie可能就无法使用了

这里解释一下跨域：域名不一样即为跨域

以 https://www.baidu.com 为例

1. http://www.baidu.com ：跨域, 协议不同（一个https,一个http）

2. https://www.taobao.com： 跨域，主域名不同

3. https://tieba.baidu.com： 跨域，子域名不同（一般的通配符证书指的是多个子域名）

4. https://www.baidu.com:3000：跨域，端口号不同

5. https://www.baidu.com/home.html: 不跨域，同源，可以理解为同一个项目不同文件夹下的多个页面

解决跨域最常用的是如下几种方案：

• 前后端放置到一个域名下，但是实际开发过程中很不实际(一些大厂可以忽略，甚至一些大厂也不是所有部门都这么做)
• 后端开放跨域，即不采用同源策略，或者设置白名单
• 部署后设置 Nginx 代理，或前端直接设置代理，即使用中间服务器代理前端访问接口：前端 <=> 代理服务器 <=> 后端

当然还有其他方案，只是对比这些太合适、不主流、成本过高，都不介绍，这里只介绍前端使用中间件设置代理的方案

首先导入库 

http-proxy-middleware

使用yarn添加该仓库

yarn add http-proxy-middleware

创建文件，执行下面代码

创建一个文件，例如：setupProxy.js，放到 src 目录下(保证在项目内，否则无法跑起来)

然后在下面添加如下代码即可

//导入函数
const { createProxyMiddleware } = require("http-proxy-middleware");

// 配置代理服务,  /editor为生效的路径
const apiProxy = createProxyMiddleware("/editor", {
    target: 'http://192.168.1.1:8000', 设置域名或者ip端口号
    //ws: true, 如果有socket需要代理，需要加上这个
    // changeOrigin: true,
    // pathRewrite: { '^': '' },
});

//然后导出即可
module.exports = function(app) {
    app.use(apiProxy);
}

网络请求设置

假设之用的库是 umi-request

最后网络请求时，不能传入 target 所在代理服务器，只传入路径就是了

例如：

import { extend } from "umi-request"

// const requestUrl = 'http://192.168.1.1/editor/api'
const requestUrl = '/editor/api' //测试代理需要，正式解决跨域,不需要传 host
//如果想更灵活，那么就不要传递host，无论后台放没放到一个服务器，没放让后台转发一下
//如果不想传递后面的部分路径，那么请求url的时候就加上全一些的路径吧

const request = extend({
    prefix: requestUrl,
    timeout: 10000,
    requestType: 'form',
    credentials: 'include' //是否包含cookie
})

/** 登陆 */
export async function requestByLogin(
    body?: API.loginParams,
    params?: {},
    options?: { [key: string]: any }
) {
    request<API.loginResponse>('/login', {
        method: 'POST',
        params,
        data: body,
        ...(options || {}),
    })
}