在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 請問如何解決webpack打包Reactjs后發(fā)送http請求出現(xiàn)的跨域問題

請問如何解決webpack打包Reactjs后發(fā)送http請求出現(xiàn)的跨域問題

使用ReactJs寫前端十分的方便,但是使用webpack打包以后想要進行http請求,就會出現(xiàn)跨域的問題。所以,我想請問一下,當我想要訪問一些api的信息,并將信息通過Reactjs展現(xiàn)在前端的時候(這些api不在我的服務器上),要如何解決呢。

回答
編輯回答
舊酒館

先猜測下你的問提,你的問題場景可能如下:

  1. 你通過webpack構建react項目,同時利用webpack提供的工具啟動了一個本地的server,這樣你就可以通過類似下面的鏈接訪問你的頁面了 http://localhost:3000/index.html
  2. 現(xiàn)在你想在你用react構建的頁面中,使用ajax去請求一個別的服務上的api,例如 https://api.github.com/users/whatever?client_id=xxxx&client_secret=yyyy

如果我沒猜錯的話,你需要完成下面2件事情

  1. 在自己的代碼中編寫ajax請求,這里以 isomorphic-fetch進行代碼示例

    import Fetch from 'isomorphic-fetch';
    
    Fetch('https://api.github.com/users/whatever?client_id=xxxx&client_secret=yyyy')
    .then(data=>{
      // 業(yè)務代碼
    })
    .catch(err=>{
      // 異常處理
    })
  2. 如果對應的api做了跨域的處理,那么就不需要而外設置,如果沒有需要使用webpack提供的webpack-dev-server中的代理設置,示例代碼如下

    // webpack.config.js
    
    devServer:{
       proxy:{
         '/xx':{
           target:"",
           changeOrigin: true,
           pathRewrite: {
              '^/xx': ''
            }
         }
       }
    }

希望上面的偽代碼能幫到你,另外相關的資源如下:

  1. isomorphic-fetch
  2. webpack-dev-server
2017年9月14日 03:24
編輯回答
悶騷型

用你的服務器去請求數(shù)據(jù) 然后再轉發(fā)給你前端的js

2018年1月2日 04:43