Webpack和節點服務器跨瀏覽器請求

我是新來反應和使用create-react-app作爲起點。我有一個返回JSON數據的API。我使用端口3000上的節點服務器運行我的api。Webpack和節點服務器跨瀏覽器請求

我也有默認的create-react-app安裝程序，它使用端口3000啓動應用程序。我想從我的api中獲取數據並使其與它一起玩在我的反應應用程序。由於交叉源請求，我得到無法檢索數據的錯誤。這通常在webpack中如何處理？

下面是我的代碼，但我基本上要作出這樣一個電話：NodeFetch('/api/jobs')從我的API端口3001

這裏運行訪問返回的數據是我的代碼：

import React from 'react' 
import NodeFetch from 'node-fetch' 

class NodeFetchData extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     jobs: [] 
    }; 
    } 


    componentDidMount() { 

    NodeFetch('http://codepen.io/jobs.json') 
    .then(res => { 
     this.setState({ jobs:res.data.jobs }); 
    }); 
    } 

    render() { 
    return (
     <div> 
     <ul> 
      {this.state.jobs.map(job => 
      <li key={job.hashid}>{job.company_name}</li> 
     )} 
     </ul> 
     </div> 
    ); 
    } 
} 

export default NodeFetchData;

來源

2016-11-16 mo_maat

顯示一些代碼來建議一些東西 – Thaadikkaaran

我能夠通過在我的package.json中添加一個代理行來實現這個工作。然後我在另一個終端上通過服務器啓動。我現在想弄清楚如何啓動api服務器和響應客戶端應用程序。

{ 
    "name": "scrap", 
    "version": "0.1.0", 
    "private": true, 
    "proxy": "http://localhost:3001/", 
    "devDependencies": { 
    "react-scripts": "0.7.0" 
    }, 
    "dependencies": { 
    "foreman": "^2.0.0", 
    "react": "^15.3.2", 
    "react-dom": "^15.3.2" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
}

來源

2016-11-16 18:32:10

作爲一個供參考，我在我的答案中提到的文章中的示例包括一種配置應用程序的方式，以便您可以從單個命令運行服務器和API，包括開發和生產環境。 – JeanLescure

以供將來參考，使用的WebPack當你需要記住在本地測試你的開發代碼和部署應用到生產環境之間的差異。

上面是因爲當處於「開發」模式時，Webpack負責在本地爲您提供應用程序，但是當涉及到您的生產環境時，所有Webpack應該做的就是將您的React.js應用程序打包成一個包反過來由實際的HTTP服務器提供服務。

考慮到以前的想法，在您的具體情況下，您在本地測試開發代碼時出現問題，這是因爲服務器和API（3000/3001）之間的端口差異。

你要確保你取時，這樣使用相對路徑：

NodeFetch('http://localhost:3001/api/jobs.json')

變爲：

NodeFetch('/api/jobs.json')

而在你的WebPack配置你要使用proxy線如下：

proxy: { 
    '/api': { 
     target: 'http://localhost:3001', 
     secure: false 
    } 
    }

有關問題的進一步閱讀，你可以看看下面的文章，我寫了覆蓋此處詳細介紹，以及另一種方式CORS問題可管理：

Webpack and CORS - Demystifying Cross-server Communications in React.js

它包括版本控制Hello World在開發環境中提供解決CORS錯誤的解決方案樣例，以及遵循普通生產就緒React.js應用標準的自認式Webpack配置。

來源

2016-12-07 18:57:22 JeanLescure

太棒了！非常感謝。當我有機會時，我會研究它，看看我能否實現它。 –

Webpack和節點服務器跨瀏覽器請求

回答

相關問題