React中配置代理转发的方式-解决跨域问题

方式一

package.json 添加配置项

{
    {
    ...
    },
    "proxy":"目标域名地址:端口号"
}

重启react项目，此时，就可以进行代理转发。

在package.json中添加proxy后，当访问一个react项目不存在的路由地址时，会自动的转发到proxy对应的目标域名地址上。（但是当请求的地址和路由规则一致时就会出问题，并且不能设置多个转发规则）

方式二

使用插件

npm i http-proxy-middleware --save

在src目录下创建一个名为 setupProxy.js 文件

const proxy = require("http-proxy-middleware")
module.exports = function(app){
    app.use(proxy.createProxyMiddleware(
        "/关键词",{
            target:"目标域名地址",
            changeOrigin:true,
            pathRewrite:{
                "^/关键词":""
            }
        }
    ))
	app.use(proxy.createProxyMiddleware(
		"/关键词",{
			target:"目标域名地址",
			changeOrigin:true,
			pathRewrite:{
				"^/关键词":""
			}
		}
	))
	...
}

重启项目，然后就可以进行代理转发