[标准]react 数据跨域请求，api输出规范
在本地开发环境中，找到 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)