Fetch请求

get请求

App.js

import React from 'react';

import ProxyDemo from './ProxyDemo';

export default class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			banners: [],
		};
	}

	componentDidMount() {
		/**
		 * fetch 基于promise
		 * https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
		 */

		fetch('http://iwenwiki.com/api/blueberrypai/getIndexBanner.php')
			.then((res) => res.json())
			.then((data) => {
				this.setState({
					banners: data.banner,
				});
				console.log(data.banner);
			});
	}

	render() {
		const { banners } = this.state;
		return (
			<div>
				<ProxyDemo></ProxyDemo>
				{banners.length > 0 ? (
					<ul>
						{banners.map((element, index) => {
							return <li key={index}> {element.title} </li>;
						})}
					</ul>
				) : (
					<div>等待数据加载</div>
				)}
			</div>
		);
	}
}

POST请求

import React from 'react';

import ProxyDemo from './ProxyDemo';
import qs from 'querystring';

export default class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			banners: [],
		};
	}

	componentDidMount() {
		/**
		 * fetch 基于promise
		 * https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
		 */

		fetch('http://iwenwiki.com/api/blueberrypai/getIndexBanner.php')
			.then((res) => res.json())
			.then((data) => {
				this.setState({
					banners: data.banner,
				});
				console.log(data.banner);
			});

		fetch('http://iwenwiki.com/api/blueberrypai/login.php', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded',
				Accept: 'application/json, text/plain,*/*',
			},
			// body: {
			// 	user_id: 'iwen@qq.com',
			// 	password: 'iwen123',
			// 	verification_code: 'crfvw',
			// },
			// 方法一：
			// body:
			// 	'user_id=iwen@qq.com&password=iwen123&verification_code=crfvw',
			// 方法二：
			body: qs.stringify({
				user_id: 'iwen@qq.com',
				password: 'iwen123',
				verification_code: 'crfvw',
			}),
		})
			.then((res) => res.json())
			.then((data) => {
				console.log(data);
			});
	}

	render() {
		const { banners } = this.state;
		return (
			<div>
				<ProxyDemo></ProxyDemo>
				{banners.length > 0 ? (
					<ul>
						{banners.map((element, index) => {
							return <li key={index}> {element.title} </li>;
						})}
					</ul>
				) : (
					<div>等待数据加载</div>
				)}
			</div>
		);
	}
}

配置package.json文件解决跨域

在package.json中添加如下代码
"proxy": "https://music.taihe.com"

proxyDemo.jsx

import React from 'react';


export default class ProxyDemo extends React.Component {
	/**
	 * 跨域的解决方案：
	 *  开发模式下：
	 *      利用环境阶级： react    vue常用框架，都提供了解决方案
	 *  生产模式下：
	 *      jsonp   cors    iframe  postMessage...
	 *
	 *      npm run build: 打包 ——> 生产模式
	 */

	componentDidMount() {
		fetch(
			'/v1/song/tracklink?sign=c39783d56daea7b8336074999c3ebf23&appid=16073360&TSID=T10055694882&timestamp=1612707993'
		)
			.then((res) => res.json())
			.then((data) => {
				console.log(data);
			})
			// 失败了
			.catch((err) => {
				console.log(new Error(err));
			});
	}

	render() {
		return <div>Hello</div>;
	}
}

手动配置跨域

参考地址：https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/proxying-api-requests-in-development.md

ProxyDemo.jsx

import React from 'react';


export default class ProxyDemo extends React.Component {
	/**
	 * 跨域的解决方案：
	 *  开发模式下：
	 *      利用环境阶级： react    vue常用框架，都提供了解决方案
	 *  生产模式下：
	 *      jsonp   cors    iframe  postMessage...
	 *
	 *      npm run build: 打包 ——> 生产模式
	 */

	componentDidMount() {
		// fetch(
		// 	'/v1/song/tracklink?sign=c39783d56daea7b8336074999c3ebf23&appid=16073360&TSID=T10055694882&timestamp=1612707993'
		// )
		// 	.then((res) => res.json())
		// 	.then((data) => {
		// 		console.log(data);
		// 	})
		// 	// 失败了
		// 	.catch((err) => {
		// 		console.log(new Error(err));
		// 	});

		fetch('/api/list')
			.then((res) => res.json())
			.then((data) => {
				console.log(data);
			});
	}

	render() {
		return <div>Hello</div>;
	}
}

router.js

const express = require('express');
const router = express.Router();

router.get('/api/list', (req, res, next) => {
	res.send([
		{
			name: 'iwen',
			age: 20,
		},
		{
			name: 'ime',
			age: 30,
		},
	]);
});

module.exports = router;

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
	app.use(
		'/api',
		createProxyMiddleware({
			target: 'http://localhost:3100',
			changeOrigin: true,
		})
	);
};