做一个练习遇到了跨域问题,网上找了很多方法
顺带问各位大神一个问题:
我的方法三解决方案中,代理路径的参数怎么抽取出来,我想在axios.get请求的时候动态发送过去,
求大神支支招
方法一:在package.json中添加以下代码 ----------- 试过无效
//package.json中加入
"proxy": {
"/api/RoomApi": {
"target": "http://open.douyucdn.cn"
}
},
方法二:react-scripts版本太高,重新安装 -------------试过无效
npm i react-scripts@1.1.1 --save
后来找了原因,说是最新版的react反向代理换了写法,于是有了第三种办法
方法三:使用http-proxy-middleware-----------亲测有效
首先,下载http-proxy-middleware
npm install http-proxy-middleware --save
在src目录下添加setupProxy.js文件
//setupProxy.js
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(proxy('/api/sliderApi',
{
target: "https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8¬ice=0&format=jsonp&platform=h5&uin=0&needNewCode=1&jsonpCallback=__jp0",
changeOrigin:true,
pathRewrite: {
"^/api": "/"
}
}))
}
使用axios配合进行请求
//下载axios
npm install axios --save
react组件调用代码如下
import React, { Component } from 'react';
import { Carousel } from 'antd';
import axios from 'axios';
import './index.less';
class Slider extends Component{
constructor(props) {
super(props);
this.state = {}
}
componentDidMount() {
this.getSliderList();
}
getSliderList (){
axios.get(`/api/sliderApi`)
.then((res) => {
console.log('请求返回的数据');
console.log(res.data)//此接口返回数据为jsonp格式,须进一步对数据进行处理
});
}
render(){
return(
<div>
<Carousel autoplay>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel>
</div>
)
}
}
export default Slider;
效果图