React axios跨域配置

本文介绍了如何修改Webpack配置以实现开发服务器的跨域请求,并展示了使用Axios库进行GET请求的示例。通过设置devServer的proxy属性,将'/proxy'路径代理到'http://localhost:8081',并配置了路径重写。同时,Axios配置了默认的基础URL为'/proxy',确保请求正确发送。
摘要由CSDN通过智能技术生成

1.修改webpack配置

module.exports = () => ({
  devServer: {
    contentBase: path.join(__dirname, 'devtest'),
    compress: true,
    port: 2222,
    //设置跨域:/proxy
    proxy:{
      '/proxy':{
        target:'http://localhost:8081',
        changeOrigin:true,
        pathRewrite:{'^/proxy':''}
      }
    },
  },

2.发起axios请求

import {Component} from 'react'

// import axios and config it
import axios from 'axios'
axios.defaults.baseURL = '/proxy';
axios.defaults.timeout = 3000;



export default class AxiosTest extends Component{

    async doGet(){
        try {
            const result = await axios({
                url:'/user/1',
                params: {
                },
                method:'get'
            }).then(
                res =>console.log(res)
            ).catch(
                err =>console.log(err)
            )
        }finally {
            console.log('finally')
        }
    }

    render() {
        return (
            <div>
                <a href={axios.defaults.baseURL}>get from: {axios.defaults.baseURL}</a>
                <p/>
                <input type="button" value="axios async get" onClick={this.doGet}/>
                <p/>
            </div>
        )
    }
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值