react项目中跨域问题

做一个练习遇到了跨域问题,网上找了很多方法

顺带问各位大神一个问题:
我的方法三解决方案中,代理路径的参数怎么抽取出来,我想在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&notice=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;

效果图
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值