前端猛男的博客基础知识 - 路由
反向代理
一般请求数据的话,浏览器之间是有同源策略跨域限制的。但是两个服务器之间请求数据的话，是没有跨域限制的，我们用本地的服务器去代理我们请求对方的服务器，然后对方服务器响应数据到我们本地的服务器上，然后浏览器请求我们本地的服务器，这样就实现了
反向代理,就不会跨域啦
src/setupProxy.js, 在src目录下创建一个setupProxy.jsp配置文件,固定名字不可以乱起。
- 安装插件
npm install http-proxy-middleware
- createProxyMiddleware: 配置信息
target：需要代理的目标服务器地址changeOrigin: 是否开启
<!-- /src/setupProxy -->
const { createProxyMiddleware } = require('http-proxy-middleware') // 引入请求代理模块
module.exports = function (app) {
//注册中间件
app.use(
'/ajax', //需要代理的路径 /ajax路径以下的都会被中转代理 (/ajax/login , /ajax/seesoin)
createProxyMiddleware({
target: 'https://i.maoyan.com', //需要代理的服务器地址
changeOrigin: true, //是否开启
})
);
//可以多次注册中间件 设置不同的反向代理
app.use(
'/api', //需要代理的路径 /api路径以下的都会被中转代理 (/api/login , /api/seesoin)
createProxyMiddleware({
target: 'https://i.maoyan.com', //需要代理的服务器地址
changeOrigin: true, //是否开启
})
)
}
<!-- App.jsx -->
import { useEffect } from 'react';
import ReactDom from 'react-dom';
const App = ()=>{
// 请求数据
useEffect(() => {
axios
.get(
"/api/mmdb/movie/v3/list/hot.json?ct=%E9%B9%A4%E5%A3%81&ci=239&channelId=4"
)
.then((res) => {
console.log(res, "请求数据");
});
}, []);
return <div>App</div>
}
ReactDom.render("<App/>",document.getElementById('root'))