Umi配置proxy解决跨域问题 请求重写

解决跨域需要在webpack配置proxy,而umi没有weppack.config.js
是因为umi将webpack配置保存在.umirc.js的配置文件中。
所以我们需要在.umirc.js文件加上(或者修改target路径):

proxy: {
    '/api': {
      target: 'http://devfetch.sqgl.com:8443',
      pathRewrite: { '^/api': '' },
      changeOrigin: true
    }
}

本地发送的请求http://localhost:8080/api/xx/xx请求的路径其实是http://devfetch.sqgl.com:8443/xx/xx

Ant Design Pro 是基于 Ant Design 开发的企业级后台管理系统框架,它处理跨域问题通常会利用内置的 request 组件以及 proxy 配置。 1. **请求拦截器 (Request Interceptor)**: 在 Ant Design Pro 中,你可以通过配置 request 的 interceptors 功能,在发送所有请求之前添加自定义的逻辑,包括设置默认的 headers、处理 token 等。如果你需要处理跨域,可以在拦截器中添加对 CORS 的支持,比如修改请求头 `withCredentials` 或者设置允许的域名 (`Access-Control-Allow-Origin`)。 ```javascript // 在umi.config.js或者global.js中的请求配置 import axios from 'axios'; axios.defaults.withCredentials = true; axios.interceptors.request.use(config => { if (!config.crossDomain) { config.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // 为了某些服务器识别这是AJAX请求 if (process.env.NODE_ENV === 'production') { config.headers.common['Access-Control-Allow-Origin'] = '*'; // 开发环境允许跨域生产环境需替换为你实际服务的域名 } } return config; }, error => Promise.reject(error)); ``` 2. **Proxy**: 如果后端 API 接口不允许直接从浏览器访问(如本地开发环境),可以启用 Node.js 作为代理服务器。在项目根目录下创建一个 `proxy.conf.json` 文件,配置文件内容类似于: ```json { "/api": { "target": "http://localhost:8000", // 你需要转发到的实际后端API地址 "changeOrigin": true, "pathRewrite": { "^/api" : "" } // 将路径前缀"/api"替换为空字符串,以便于URL匹配 } } ``` 当你向 `/api` 前缀的路径发起请求时,这些请求会被转发到指定的服务器地址。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值