axios解决跨域问题

1.配置代理

第一步 在src文件夹下创建一个名字为 setupProxy.js文件

注意修改完setupProxy.js文件要重启脚手架才能生效

 2.文件内容

const proxy = require('http-proxy-middleware')
module.exports = function(app){
    app.use(
        proxy('/api1',{ //第一个参数配置前缀,遇见/api1前缀的请求，就会触发该代理配置
            target:'https://query.asilu.com/weather/baidu', //请求转发给谁
            changeOrigin:true,//控制服务器收到的请求头中Host的值
            pathRewrite:{'^/api1':''} //重写请求路径(必须)
        }),
        proxy('/api2',{在请求/api2的时候会替换成https://api.asilu.com/phone/
            target:'https://api.asilu.com/phone/',
            changeOrigin:true,
            pathRewrite:{'^/api2':''}
        }),
    )
}

 App.js代码

import React, { Component } from 'react'
// 引入axios
import axios from 'axios'
export default class App extends Component {
    // 创建函数发送axios请求获取数据
    getMess = ()=>{
        //请求地址,then后面两个参数,成功执行第一个回调函数,失败执行第二个
        axios.get('/api1?city=北京').then(
            response=>{
                console.log('成功了',response.data)
            },
            error=>{
                console.log('失败了',error)
            }
        )
    }
    getMess2 = ()=>{
        //请求地址,then后面两个参数,成功执行第一个回调函数,失败执行第二个
        axios.get('/api2').then(
            response=>{
                console.log('成功了',response.data)
            },
            error=>{
                console.log('失败了',error)
            }
        )
    }
    render() {
        return (
            <div>
                <button onClick={this.getMess}>天气查询</button>
                <button onClick={this.getMess2}>手机归属地查询</button>
            </div>
        )
    }
}

 效果: