React axios跨域配置

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>
        )
    }
}

猜你喜欢

转载自blog.csdn.net/kaiyuantao/article/details/115485805