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;

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 项目使用 Axios 进行网络请求时,可能会遇到跨域问题。出现跨域问题的原因是浏览器的同源策略限制,即只允许同源网址(协议、域名、端口号均相同)之间进行通信。如果你需要访问不同源的资源,就需要进行跨域处理。 以下是一些处理跨域问题的方法: 1. 使用代理 在 React 项目,可以通过配置代理来解决跨域问题。在 package.json 文件添加如下代码: ``` "proxy": "http://api.example.com" ``` 这里将代理地址设置为 http://api.example.com ,当发送请求时,axios 会自动将请求发送到代理地址,然后再由代理地址转发到目标地址。这样就可以避免跨域的问题。 2. 后端设置 CORS 如果你无法使用代理,或者代理无法满足你的需求,可以让后端设置 CORS(跨域资源共享)来解决跨域问题。CORS 是一种机制,它允许 Web 应用程序从不同的源访问其资源。 在后端代码,可以添加如下代码来设置 CORS: ``` res.setHeader('Access-Control-Allow-Origin', '*'); ``` 这里将 Access-Control-Allow-Origin 设置为 * ,表示允许所有来源访问资源。当然,你也可以设置为特定的来源。 3. 使用 JSONP JSONP 是一种解决跨域问题的方法,它利用了 HTML script 标签可以跨域加载资源的特性。在 React 项目,可以通过使用 jsonp 库来实现 JSONP 请求。 以下是一个使用 jsonp 库的例子: ``` import jsonp from 'jsonp'; jsonp('http://api.example.com', {}, (err, data) => { if (err) { console.error(err); } else { console.log(data); } }); ``` 这里调用了 jsonp 函数,将目标地址设置为 http://api.example.com 。jsonp 函数会自动创建一个 script 标签,加载目标地址,并在加载完成后执行回调函数。 在 React 项目使用 Axios 进行网络请求时,可以通过对 Axios 进行封装来简化代码,并提高代码的复用性。以下是一个简单的 Axios 封装示例: ``` import axios from 'axios'; const instance = axios.create({ baseURL: 'http://api.example.com', timeout: 5000, }); instance.interceptors.request.use( (config) => { // 在请求发送之前做一些处理 return config; }, (error) => { // 对请求错误做一些处理 return Promise.reject(error); } ); instance.interceptors.response.use( (response) => { // 对响应数据做一些处理 return response.data; }, (error) => { // 对响应错误做一些处理 return Promise.reject(error); } ); export default instance; ``` 这里创建了一个 Axios 实例,并设置了 baseURL 和 timeout 。然后,通过拦截器对请求和响应进行处理,并最终返回处理后的数据。在其他代码,只需要引入封装后的 Axios 实例即可进行网络请求。 ``` import axios from './axios'; axios.get('/users').then((data) => { console.log(data); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值