React使用 http-proxy-middleware 插件代理跨域

出现跨域问题的原因是因为前端和后端所在的环境不符合浏览器的同源策略导致的。

哪同源策略又是什么呢？举例来说，http://localhost:3000这个网址，协议是http://，域名是localhost，端口是3000。协议、域名、端口需要全部一致才能视为同源

当我们不同源的时候就需要用到跨域了，跨域的方式较多我用的是插件的方式首先我们需要下载http-proxy-middleware插件

npm install --save http-proxy-middleware

下载好插件后在项目的src目录下新建文件：setupProxy.js；是固定的文件名，与app.js同级即可

//引入插件
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function(app) {
    app.use("/api",
        createProxyMiddleware({
            target: "http://172.26.136.102:8000",//目标端口
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        })
    );
};

使用方法

//下载并引入axios （npm install --save axios）
import axios from "axios";
//第一个值为接口路径
//第二个值为要传递的参数
//第三个值为配置请求头
axios.post('/api/xxxxxx',{name:"张三"},{header:{token:"xxxxxxxxxxxxxxxxxxx"}).then((res)=>{
	console.log(res)
)

CV仔别跑，回来三连 ！！！