react项目解决跨域

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

请叫我大哥大

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

阅读量226

点赞数 1

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/m0_37931969/article/details/116104515

版权

react 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Node.js搭建一个简单的服务器来处理React应用的跨域问题。通过创建Express应用并监听指定端口，然后在React项目中利用`create-react-app`的proxy配置或者自定义`setupProxy.js`文件来代理API请求，从而实现跨域访问。这种方法允许开发者在开发阶段轻松地处理前端与后端的通信，但实际生产环境中可能需要采用其他跨域解决方案。

摘要由CSDN通过智能技术生成

react 解决跨域

首先用node构建一个服务
a. 新建一个文件夹
b. cd 到当前文件夹下
c. npm init 一路回车
d. 安装express
yarm add express
e. 创建一个server.js 文件
f. 将以下代码放到server.js 中
g. 用node server.js 启动
代码：

const express = require("express")
const app = express()

app.use((req, res, next)=>{
    console.log("请求了server服务")
    console.log("请求来自：", req.get("Host"))
    console.log("请求的地址：", req.url)
    next()
})
app.get("/getNameList", (req, res)=> {
    const data = [
        {id: "1", name: "小米"},
        {id: "2", name: "小王"}
    ]
    res.send(data)
})
app.listen(5000,(err)=>{
    if (!err) {
        console.log("服务启动成功，请求地址http://localhost:5000/getNameList")
    }
})

构建react 项目
a. 全局安装create-react-app
npm i create-react-app -g
b. 创建项目
create-react-app react-demo
在项目中安装axios
npm i axios --save-dev
App.js

import React from "react"
import axios from "axios"
export default class App extends React.Component{
  getList = ()=> {
    axios.get("/getNameList").then((res)=>{
      console.log(res.data)
    })
  }
  render(){
    
    return (
      <div>
        <button onClick={this.getList}>获取数据</button>
      </div>
    )
  }
}

这个时候当点击获取数据的时候就会产生跨域，如下图：
在这里插入图片描述
解决办法：

在package.json 中配置 “proxy”: “http://localhost:5000”
优点是：配置简单方便，请求资源时url中可以不加任何前缀
缺点是：不能同时配置多个代码请求
工作方式：该请求会优先请求前端资源，当请求3000资源不存在时候，才会请求5000的资源
创建代理配置文件，在src下面创建文件
src/setupProxy.js 文件名字必须叫做setupProxy.js
文件内容：

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

module.exports = function (app) {
    app.use(
        proxy('/api1', { // 需要转发的请求，页面上所有带api的请求都会转接发给5000
            target: "http://localhost:5000", // 目标转发地址，后台服务的地址
            // 设置为true的时候 ，服务器收到的请求头中的host为localhost:5000
            // 设置为false的时候，服务器收到的请求头中的host为localhost:3000
            changeOrigin: true,
            // 去除自己加的请求前缀，保证请求给后台服务器的地址是正确的
            pathRewrite: {
                '^/api1': ''
            }
        }),
        proxy('/api2', { // 需要转发的请求，页面上所有带api的请求都会转接发给4000
            target: "http://localhost:4000", // 目标转发地址，后台服务的地址
            // 设置为true的时候 ，服务器收到的请求头中的host为localhost:4000
            // 设置为false的时候，服务器收到的请求头中的host为localhost:3000
            changeOrigin: true,
            // 去除自己加的请求前缀，保证请求给后台服务器的地址是正确的
            pathRewrite: {
                '^/api2': ''
            }
        })
    )
}

优点：可以配置多个代理，可以灵活的配置是否需要代理
缺点：前端请求资源时必须加前缀