用umi和webpack一起解决跨域问题

跨域问题是指当一个请求的协议、域名或端口与服务器所在的协议、域名或端口不同时，浏览器会出于安全考虑，阻止该请求的发送。
通常来说，客户端在访问与自己域名不同的服务端时，就会造成跨域。比如，用node起了一个http://localhost:8080 的服务；那么在这个服务器下访问的网页也就是默认在 http://localhost:8080/ 页面，那么在这个页面ajax请求 https://www.baidu.com/ 就会造成跨域。

解决这个问题的方法有很多，比如：

• 使用代理 ：代理服务器可以将请求转发到其他服务器，这样就可以绕过浏览器的跨域限制。
• 使用CORS ：CORS（跨域资源共享）是一种W3C标准，它允许浏览器在不同域名之间进行跨域请求。
• 修改服务端代码 ：如果服务器端代码支持跨域，那么客户端就可以直接发起跨域请求，而不会受到浏览器的限制。

在这里，我们介绍一种使用umi和webpack来解决跨域问题的方法。umi是一个基于React的企业级前端应用框架，它提供了很多开箱即用的功能，包括解决跨域问题。webpack是一个打包工具，它可以将前端代码打包成一个可执行的JavaScript文件。

要使用umi和webpack来解决跨域问题，首先需要在项目中安装这两个包。可以通过以下命令来安装：

npm install umi webpack

安装完成后，需要在项目的配置文件中配置跨域代理。umi的配置文件是 package.json 文件，webpack的配置文件是 webpack.config.js 文件。在 package.json 文件中，添加如下配置：

{
  "proxy": {
    "/api": {
      "target": "http://localhost:8080",
      "changeOrigin": true,
      "pathRewrite": { "^/api" : "" }
    }
  }
}

在 webpack.config.js 文件中，添加如下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/api' : '' }
      }
    }
  }
};

配置完成后，就可以在项目中使用umi和webpack来解决跨域问题了。在组件中，可以直接发起跨域请求，而不会受到浏览器的限制。

import axios from 'axios';

const App = () => {
  const fetch数据 = () => {
    axios.get('/api/data')
      .then(res => {
        console.log(res.data);
      })
      .catch(err => {
        console.error(err);
      });
  };

  return (
    <div>
      <button onClick={fetch数据}>获取数据</button>
    </div>
  );
};

export default App;

以上就是如何使用umi和webpack来解决跨域问题的方法，希望对大家有所帮助。