[标准]react 数据跨域请求,api输出规范

zhuanbike 2022-1-3 711

在本地开发环境中,找到  node_modules  对应路径/node_modules/react-scripts/config/webpackDevServer.config.js

找到文件后,在文件中翻到:proxy

直接将下列代码替换成自己获取的api地址即可。

  proxy:{
      "/api":{
        target:"http://www.weather.com.cn/data/cityinfo", //这个只是一个前部地址,后面详细url可以在调用时引用
        changeOrigin:true,
        "pathRewrite":{
          "^/api":"/"
        }
      }
    },

演示:


第二步:

创建一个数据调用js文件:

import React, { Component } from 'react'
import axios from 'axios'
export default class Home extends Component {
constructor(props){
super(props)
this.state={
arr:[]
}
}
componentDidMount() {
this.ajaxfun()
}
ajaxfun=()=>{
axios.get("/api/101320101.html").then((ok)=>{
console.log(ok)
this.setState({
arr:ok.data
})
})
}
render() {
return (
<div>
</div>
)
}
}

再在主文件中引用一下,这里直接写在index.js里面

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './1';
import reportWebVitals from './reportWebVitals';
function App() {
  return (
    <div className="App">
        这是一个演示文字
      <Home/>
    </div>
  );
}
ReactDOM.render(<App />,document.getElementById("root"));
最新回复 (0)
发新帖