http-proxy-middleware手动配置代理解决跨域问题

基于官方脚手架搭建react单页应用程序

快速开始：

npx creat-react-app myApp
cd myApp
npm start

打开http://localhost:3000/ 查看你的应用
此时我们就可以在本地开始开发自己的项目了

问题来了:本地开发时如何解决前后端跨域问题？？

问题描述：本地开发项目时，调用后端接口遇到跨域问题:
例如本地http://localhost:3000
而后端接口地址为：http://dev-insurance.com/dw-insurance-api
此时需要解决跨域问题才能正常调用后端接口拿到数据，并展示在页面上。

解决：
手动配置代理

注意：此功能适用于 [email protected] 及更高版本。

1. 使用npm或者yarn 安装http-http-proxy-middleware

$ npm install http-proxy-middleware --save
$ # 或
$ yarn add http-proxy-middleware

2. 创建src/setupProxy.js，并将以下内容放入该文件中

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  // ...
};

你现在可以根据需要注册代理！以下是使用上述 http-proxy-middleware 的示例：

//注意： 你无需在任何位置导入此文件。 它在启动开发服务器时会自动注册。
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',//表示请求的接口以/api/开头
        //例如请求后端接口http://dev-insurance.com/dw-insurance-api/api/login
        //fetch('/api/login').then()
        createProxyMiddleware({
            target: 'http://dev-insurance.com/dw-insurance-api', // 目标服务器 host
            changeOrigin: true, // 默认false，是否需要改变原始主机头为目标URL
            // ws: true,                         // 是否代理websockets
            // pathRewrite: {
            //     '^/api/old-path' : '/api/new-path',     // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path
            //     '^/api/remove/path' : '/path'           // 同上
            // },
            // router: {
            //     // 如果请求主机 == 'dev.localhost:3000',
            //     // 重写目标服务器 'http://www.example.org' 为 'http://localhost:8000'
            //     'dev.localhost:3000' : 'http://localhost:8000'
            // }
        })
    )
}

注意： 你无需在任何位置导入此文件。 它在启动开发服务器时会自动注册。

3. 重新npm start即可
4. 举例应用：fetch 请求访问后端http://dev-insurance.com/dw-insurance-api/api/login 登录接口

handleClickbtn(){
	fetch('/api/login', {
		  method: 'POST', // or 'PUT'
		  body: JSON.stringify(data), // data can be `string` or {object}!
		  headers: new Headers({
		    'Content-Type': 'application/json'
		  })
	}).then(res => res.json())
	.catch(error => console.error('Error:', error))
	.then(response => console.log('Success:', response));
}
<button onClick={this.handleClickbtn.bind(this)}>登录</button>

参考：
https://www.html.cn/create-react-app/docs/proxying-api-requests-in-development/

https://segmentfault.com/a/1190000016199721