推荐一个国外好的网站模板,网站建设注意什么,网站icon图标怎么加,互联网做网站一、问题描述#xff1a;
控制台报错#xff0c;出现跨域问题
二、解决方案
配置代理#xff1a; 第一种配置方式#xff1a; 在package.json中追加如下配置 proxy:http://localhost:5000说明#xff1a;
优点#xff1a;配置简单#xff…一、问题描述
控制台报错出现跨域问题
二、解决方案
配置代理 第一种配置方式 在package.json中追加如下配置 proxy:http://localhost:5000说明
优点配置简单前端请求资源时可以不加任何前缀。缺点不能配置多个代理。工作方式上述方式配置代理当请求了3000不存在的资源时那么该请求会转发给5000 优先匹配前端资源 第二种配置方式 第一步创建代理配置文件 在src下创建配置文件src/setupProxy.js编写setupProxy.js配置具体代理规则 const proxy require(http-proxy-middleware)module.exports function(app) {app.use(proxy(/api1, { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)target: http://localhost:5000, //配置转发目标地址(能返回数据的服务器地址)changeOrigin: true, //控制服务器接收到的请求头中host字段的值/*changeOrigin设置为true时服务器收到的请求头中的host为localhost:5000changeOrigin设置为false时服务器收到的请求头中的host为localhost:3000changeOrigin默认值为false但我们一般将changeOrigin值设为true*/pathRewrite: {^/api1: } //去除请求前缀保证交给后台服务器的是正常请求地址(必须配置)}),proxy(/api2, { target: http://localhost:5001,changeOrigin: true,pathRewrite: {^/api2: }}))
}说明
优点可以配置多个代理可以灵活的控制请求是否走代理。缺点配置繁琐前端请求资源时必须加前缀。
changeOrigin控制服务器收到的请求头中Host字段的值 pathRewrite重写请求路径
