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:{
				"^/關鍵詞":""
			}
		}
	))
	...
}

重啓項目，然後就可以進行代理轉發