react项目解决跨域

react 解决跨域

1. 首先用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")
    }
})

2. 构建react 项目
   a. 全局安装create-react-app
   npm i create-react-app -g
   b. 创建项目
   create-react-app react-demo
3. 在项目中安装axios
   npm i axios --save-dev
4. 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>
    )
  }
}

这个时候当点击获取数据的时候就会产生跨域，如下图：

解决办法：

1. 在package.json 中配置 “proxy”: “http://localhost:5000”
   优点是：配置简单方便，请求资源时url中可以不加任何前缀
   缺点是：不能同时配置多个代码请求
   工作方式：该请求会优先请求前端资源，当请求3000资源不存在时候，才会请求5000的资源
2. 创建代理配置文件，在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': ''
            }
        })
    )
}

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