react 项目中在开发时跨域问题的解决

最新推荐文章于 2024-08-08 09:02:17 发布

城南花开ze

最新推荐文章于 2024-08-08 09:02:17 发布

阅读量3.4k

点赞数

分类专栏： React 文章标签： react 项目开发跨域问题的解决

本文链接：https://blog.csdn.net/weixin_42614080/article/details/106980006

版权

React 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

一、方案一

在使用 create-react-app 脚手架创建 react 项目的时候，在开发时进行接口访问的时候，会出现跨域问题。

解决方法是在 package.json 文件中增加如下配置，如下所示：

"proxy": "http://localhost:5000"  // 配置你要请求的服务器地址

这一种方法只针对于低版本的，create-react-app 的版本低于 2.0 的时候可以在 package.json 增加 proxy 配置，proxy 可以是 object 类型。

二、方案二

在使用 create-react-app 脚手架创建 react 项目的时候，在开发时进行接口访问的时候，会出现跨域问题。
解决方法是在 package.json 文件中增加如下配置，配置多个代理。target 是目标服务器；changeOrigin 是默认 false ，是否需要改变原始主机头为目标 URL；secure 是如果是 https 接口需要配置这个参数为 true；pathRewrite 是重写请求，比如我们源访问的是 api，那么请求会被解析为 /，如下所示：

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

在运行后，会报错，提示只支持 string 类型，不支持 object，也同意是只支持低版本的。
对此，解决办法是降级，需要删除 node_module/react-scripts，然后执行 npm i react-scripts@1.1.1 --save，最后重启服务即可由前端解决跨域问题。

三、方案三

先下载 http-proxy-middleware，使用 http-proxy-middleware 解决跨域问题，通过 npm i http-proxy-middleware --save 命令下载 http-proxy-middleware。

创建 src/setupProxy.js，代码如下所示：

const proxy = require("http-proxy-middleware");

module.exports = function (app) {
	// proxy第一个参数为要代理的路由
    app.use(proxy("/data", {
        target: "http://localhost", //配置你要请求的服务器地址，代理后的请求网址
        pathRewrite: {'^/data': ''}, //路径重写
        changeOrigin: true, // 是否改变请求头
    }))
    app.use(proxy("/rest", {
        target: "http://localhost/rest",
        pathRewrite: {'^/data': ''},
        changeOrigin: true,
    }))
};

通过 npm run eject 或者是 yarn eject 命令，让 react 项目中的配置文件暴露出来。
在暴露后的配置文件中，start.js 里面做一下配置，如下所示：
```
  require('../src/setupProxy')(devServer);
```

在 webpack.dev.conf.js 中的 devServer 项进行配置，webpack 文件是自己配置的，没有暴露 create-react-app 的 eject 文件，代码如下所示：

  devServer: { // 配置webpack-dev-server， 在本地启动一个服务器运行
    host: 'localhost', // 服务器的ip地址 希望服务器外可以访问就设置 0.0.0.0
    port: 8088, // 端口
    open: true, // 自动打开页面
    historyApiFallback: true,
    proxy: {
      "/v1": {
        "target": "https://www.google.com/",
        "changeOrigin": true
        }
    }
  },