解决跨域的方案有很多，比如说 JsonP、document.domain、window.name、postMessage、nginx等，本文主要讲一下开发环境下如何配置反向代理实现跨域，注意以下方法仅限于开发环境，生产环境不适用。

webpack

如果当前项目是通过 webpack 来打包的，则可以利用 devServer 来实现反向代理，具体代码如下：

// webpack.config.jsmodule.exports = {    entry: {},    module: {},    // ...    devServer: {        historyApiFallback: true,        proxy: {            '/mock': { // 匹配以 /mock 开头的请求，都将被转发                target: ';,  // 代理跨域目标服务器接口                changeOrigin: true, // 默认 false，changeOrigin 是否改变请求头                secure: false,  // 当代理某些 https 服务报错时用                // ws: true, // 是否代理 websockets                pathRewrite: {                    '^/mock': '' // 重写请求，比如原访问 /mock/list，那么请求会被解析为                 }            }        }    }}

比如前端请求地址为 /mock/login，会被转发到地址为 的服务器接口。

Vue

无论是 Vue项目还是 React 项目，都是通过 webpack 来构建的，但是通过官方脚手架构建的项目，是对 webpack进行了封装的，看不到相关的配置文件，所以原则上是不能直接去修改 webpack 配置。但是 Vue 可以通过在项目根目录下创建 vue.config.js 文件来覆盖 webpack 的配置，具体配置如下：

module.exports = {    devServer: {        historyApiFallback: true,        proxy: {            '/mock': {                target: ';,                changeOrigin: true,                secure: false,                pathRewrite: {                    '^/mock': ''                }            }        }    }}

第一种方式

在 package.json 中添加一个 proxy 字段：

{  "proxy": ";}

不过这种方式在早期 react 项目中有效，在 react-script@2.0.0 或更高版本中，建议使用以下的方式。

第二种方式（推荐）

借助 http-proxy-middleware 模块来实现，项目中安装该模块：

npm i http-proxy-middleware -D

然后在项目的 src 目录下创建 setupProxy.js 文件，内容如下：

const { createProxyMiddleware } = require('http-proxy-middleware');// const proxy = require("http-proxy-middleware"); // 注意这种写法失效module.exports = function (app) {    app.use(createProxyMiddleware(      '/mock',       {        target: ';,        changeOrigin: true,         pathRewrite: {          '^/mock': ''        }      }    ))}

该文件不需要引入，react 启动后会自动引入该文件的，配置完毕后，一定要重启服务器后，再测试。

第三种方式（扩展性更强）

还有一种方式比较粗暴，直接运行 npm run eject 命令将项目的 webpack 配置文件暴露出来，但是这种方式会使得项目结构变得非常的复杂，也不容易修改原始配置，但是可以通过 customize-cra 模块来拓展 webpack的配置，首先安装模块：

npm i -D customize-cra react-app-rewired

第二步、修改 package.json 的 scripts 的配置：

"scripts": {    "start": "react-app-rewired start",    "build": "react-app-rewired build",    "test": "react-app-rewired test --env=jsdom",    "eject": "react-scripts eject"}

第三步、在项目的根目录下创建config-overrides.js，内容如下：

const path = require('path');const { overrideDevServer } = require('customize-cra');module.exports = {  devServer: overrideDevServer((config)=> (    {      ...config,      proxy: {        '/api': {          target: ';,          changeOrigin: true,          pathRewrite: {            '^/api': '',          },        },         '/mock': {          target: ';,          changeOrigin: true,          pathRewrite: {            '^/mock': '',          },        }      }    }  ))}

然后通过 yarn start 运行项目即可。

【本文转载自我的微信公众号-飞舟技术社区】

【喜欢我的文章欢迎 转发 点赞 与 关注，我会经常与大家分享前端的知识点的】