“proxy” in package.json must be a string 解決辦法

今天學習一個react項目。想從本地服務器獲取數據。

直接axios.get('http://localhost:80/api/react/header.json')，報錯跨域。

網上查了下，需要在package.json里配置下proxy。OK，照着大神的分享一步一步配置好了。卻提示：

照字面意思來理解。。proxy必須是一個字符串，但是我配置的是對象。

方法1：那就按照字符串來配置。

使用：

需要注意的是，get方法里的url路徑無需寫本地服務器地址了，也就是說所有的請求都會走這里。。

我的是可以了。如果有錯誤，歡迎指出。

 

方法2：http-proxy-middleware 插件。

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

然后在src目錄下創建一個setupProxy.js文件。內容如下：

const proxy = require('http-proxy-middleware');
 
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:80' }));
  // app.use(proxy('/test', { target: 'http://localhost:3000' }));
  // 省略...
};

需要注意的是，該文件無需在任何地方引入，重新啟動項目（npm start）即可。

另外‘/api’意思是碰到這個開頭的路徑就會走上面的target地址。就是拼接起來的感覺，如：

相當於http://localhost:80/api/react/header.json。

需要注意的是，/api也會拼接上去，如果你的路徑沒有這個單詞，可以使用完整的配置，如下：

app.use(proxy('/api', { 
target: 'http://localhost:80',
changeOrigin:true,
pathRewrite: {
            "^/api": "/" // 把/api 變成空
        }
 }));

相當於http://localhost:80/react/header.json。

跑起來大概是這樣子。

如有錯誤，歡迎指出。

 

方法3 ？：把node_modules 里的react-scripts刪除，重新安裝較低的版本。

如： cnpm i react-scripts@1.1.1 --save。

這個方法嘗試了幾次，都沒有安裝成功，也不太清楚問題在哪里。。