react的跨域、跨域的注意事项
====================================================================
首先查看react项目的版本,>2时使用以下完成跨域
其实现在你创建一个项目,几乎都是>2的版本了,不信你查查看
1、查看版本
create-react-app -V
2、我们先来看看后端的跨域(要注释掉,不然你做啥react跨域)
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'X-Requested-With,X_Requested_With,Content-Type,auth');
next();
})
3、正文开始了
当只有一个代理时,在package.json里面加一句:“proxy”:“http://localhost:8888/” 搞定
但是很多时候不仅只有一个代理,那么我们该怎么做呢?
第一步:
安装:npm install http-proxy-middleware
第二步:
在src文件下新建 setupProxy.js文件,复制以下代码搞定(这个文件会被自动识别,不用去导入)
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8888/',
changeOrigin: true,
pathRewrite: {
'^/api': '',
}
})
);
app.use(
'/apc',
createProxyMiddleware({
target: 'http://localhost:7777/',
changeOrigin: true,
pathRewrite: {
'^/apc': '',
}
})
);
};
注意:
1、如果你在setupProxy.js中使用的是proxy,但是却不生效?把proxy换成createProxyMiddleware就行了
2、 如果你不写pathRewrite: {’^/api’: ‘’},跨域能成功,但你拿不到想要的数据
====================================================================
跨域成功后,如何操作获取数据呢?
请看文章:https://blog.csdn.net/csdnyp/article/details/115937808