【React】入门第八天 - axios和跨域

在这里插入图片描述

数据请求

live-server

什么是live-server

live-server是一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

所以这个就当做我们的mock的服务

安装

npm的安装方式（推荐）

npm i -g live-server

修改package.json，添加mock

"scripts": {
    
    
    "mock": "live-server ./src/mock --port=9000"
  },

当然在src/mock下你得有一个json文件，然后只需要在终端输入npm run mock，你的服务就可以启动了。

使用vscode插件安装

在插件仓库查找live server，并安装

在这里插入图片描述

点击右下角的Go Live即可启动服务，默认的端口是5500。

在这里插入图片描述

axios

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

npm install --save axios

安装完成以后引用axios

import axios from "axios"

我们在componentDidMount这个钩子函数中调用axios去请求数据，完整代码如下

import React, {
    
     Component } from "react";

import axios from "axios"

export default class Api extends Component {
    
    

    constructor(props){
    
    
        super(props)
        this.state = {
    
    
            param: ""
        }
    }

    // 钩子函数，当这个Component 渲染完成后自动调用
    componentDidMount(){
    
    
        axios.get("http://127.0.0.1:9000/data.json")
            .then((data)=>{
    
    
                console.log(data.data.log_pb.impr_id)
                this.setState({
    
    
                    param: data.data.log_pb.impr_id
                })
            })
    }
    render(){
    
    
        return ( <div>
            Api 组件
        <div> {
    
     this.state.param}</div>
        </div> )
    }
}

跨域问题

前端代理

/node_modules/react-scripts/config/webpackDevServer.config.js

修改
在这里插入图片描述

proxy:{
    
    
  "/api":{
    
    
    // target : "http://www.weather.com.cn/data/cityinfo/"
    target: "地址",
    // changeOrigin 
    changeOrigin: true,
    "pathRewrite":{
    
    
        "^/api": ""
    }
  }
},

请求

cityInfo(cityId){
    
    
    axios.get("/api/"+cityId+".html")
        .then((data)=>{
    
    
            console.log(data.data)
        })
}

注意，记得重启一次。

一般情况我们都是让后端允许跨域的。

比如java的springboot在contoller类上标注@CrossOrigin(value = "*")，等等很多方式。