请问如何解决webpack打包Reactjs后发送http请求出现的跨域问题

Question

使用ReactJs写前端十分的方便，但是使用webpack打包以后想要进行http请求，就会出现跨域的问题。所以，我想请问一下，当我想要访问一些api的信息，并将信息通过Reactjs展现在前端的时候（这些api不在我的服务器上），要如何解决呢。

Answer 1

先猜测下你的问提，你的问题场景可能如下：

1. 你通过webpack构建react项目，同时利用webpack提供的工具启动了一个本地的server，这样你就可以通过类似下面的链接访问你的页面了 http://localhost:3000/index.html
2. 现在你想在你用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=>{
     // 业务代码
   })
   .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

Answer 2

用你的服务器去请求数据 然后再转发给你前端的js