配置proxy解决跨域问题

Posted 2021-03-16 zsy0712

用一个最简单的方法解决API资源请求跨域问题：http-proxy-middleware

http-proxy-middleware不需要自己安装，在安装webpack过程中，会自动依赖安装到你的node_modules文件夹下，如果你发现没有，那么请自行安装

npm install --save-dev http-proxy-middleware

1、前端部署了nodejs服务器，采用app.listen()启动前端服务器，那么你只需要在你的js中添加下面几行代码即可

假设你的前端服务器js文件叫做server.js

//导入proxy
var proxy = require(‘http-proxy-middleware‘)
 
//context可以是单个字符串，也可以是多个字符串数组，分别对应你需要代理的api,星号（*）表示匹配当前路径下面的所有api
const context = [`/login`, `/admin/*`]
 
//options可选的配置参数请自行看readme.md文档，通常只需要配置target，也就是你的api所属的域名。
const options = {
    target: ‘http://www.xxx.com‘,
    changeOrigin: true
}
 
//将options对象用proxy封装起来，作为参数传递
const apiProxy = proxy(options)
 
//现在你只需要执行这一行代码，当你访问需要跨域的api资源时，就可以成功访问到了。
app.use(context, apiProxy)

2、你可能没有前端node服务器，但是你用来webpack的devServer来启动前端项目，这个时候的配置跟上面类似。

(1)、在你的webpack.config.js里面添加proxy配置。

//导入proxy
    var proxy = require(‘http-proxy-middleware‘)
    
    //context可以是单个字符串，也可以是多个字符串数组，分别对应你需要代理的api,星号（*）表示匹配当前路径下面的所有api
    const context = [`/login`, `/admin/*`]
    
    module.exports = {
        devServer: {
           host: ‘localhost‘,
           port: ‘3011‘,
           proxy: [
               {
                    context: context,
                    target: ‘https://www.xxx.com‘,
                    secure: false
              }
           ]
        }
    }

 

 

（2）、Umi配置

解决跨域需要在webpack配置proxy，而umi没有weppack.config.js

是因为umi将webpack配置保存在.umirc.js的配置文件中。
所以我们需要在.umirc.js文件加上（或者修改target路径）

在.umirc.js文件加上：

"proxy": {
        "/api": {   //代理的api，要和nginx配置的一直
            "target": "http://192.168.1.100:5000"
            "changeOrigin": true,
            "pathRewrite": function (path, req) {
                // 实用其他ip打开下面
                //  path = path.split(‘/‘);
                //  path[2] = ‘default‘;
                //  return path.join(‘/‘);
                //   支线代码

                //  if (IS_DEBUG)
                //      path = path.replace(‘urrm‘, ‘default‘);
                return path;
            }
        }

    },

或者如果创建多个域

 "proxy": {
    "/api/RoomApi": {
      "target": "http://open.douyucdn.cn",
      "changeOrigin":true
    },
    "/api/v1":{
      "target":"http://capi.douyucdn.cn",
      "changeOrigin":true
    }
  }