一、 配置 package.json

在package.json中,添加 proxy配置项。之后所有请求都会指向这个地址。

例如在packjson里添加:

	"proxy":"https://localhost:5000"

添加并重启项目后,就可以请求了。
比如请求接口: https://localhost:5000/demo
实际请求写法可以是:

let url = '/demo'
axios.get(url).then(
	res=>{console.log("成功获取数据",res.data)},
	err=>{console.log("获取数据失败",err)}
)

这里的url写 /demo 或者 本地项目端口(若当前前端项目端口号为 3000 ),
url也可写成 https://localhost:3000/demo

但若此处的前部分 替换成 https://localhost:5000/demo或者其他的,就又会被同源策略拦住。

注:使用该方法配置代理时,就决定了项目只对一个地址进行代理,无法配置第二个。

二、使用 setupProxy.js

在项目根目录处创建 setupProxy.js,此文件名称不能随意更改。
该文件的编写示例如下:

const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = function(app){
    app.use(
        createProxyMiddleware('/api',{// 遇见 /api 前缀的请求,就会触发该代理配置
            target:'http://localhost:5000',// 请求转发给谁
            changeOrigin:true,//控制服务器收到的响应头中Host字段的值
            pathRewrite:{
                 '^/api':''//重新请求路径
            }
        }),
    )
}

此时,上述url需改为/api/demo,当请求发送时会将/api的前缀自动改写成http://localhost:5000

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐