React配置proxy跨域
好久没写文章了,最近在学习react,刚配置请求遇到跨域问题 , 自己记录下 , 同时也帮助下有需要的
安装 : npm i http-proxy-middleware
配置: 注意这里是在src目录下,不是根目录 , 我之前创建配置文件习惯了配置到了根目录下. 不是根目录!不是根目录!不是根目录!
创建 setupProxy.js 文件
module.exports = function (app) {app.use('/api',createProxyMiddleware( { // 遇到 /api 前缀的请求,就会触发该代理配置target: 'http://127.0.0.1:3303', // 请求转发给谁changeOrigin: true, // 控制服务器收到的响应头中的 Host 字段值 (建议都写)pathRewrite: { '^/api': '' } // 重写请求路径(必须写)}))}
遇到了几个坑,刚开始吧 '/api' 写到了 createProxyMiddleware里面 导致了运行页面直接提示找不到页面
再就是把引用写成了这样:
const { createProxyMiddleware: proxy } = require('http-proxy-middleware')
新版本的引用已经改了 >_<