React中配置请求代理解决跨域问题

一、跨域的产生

1.同源策略

• AJAX在请求服务端接口的时候，需要遵循同源策略：协议+域名+端口三者皆相同，可以视为在同一个域，否则为不同域。
• 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

2.为什么不能跨域

• Ajax 其实就是向服务器发送一个 GET 或 POST 请求，然后取得服务器响应结果，返回客户端。
• Ajax 跨域请求，在服务器端不会有任何问题，只是服务端响应数据返回给浏览器的时候，浏览器根据响应头的Access-Control-Allow-Origin字段的值来判断是否有权限获取数据。
• 因此，服务端如果没有设置跨域字段设置，跨域是没有权限访问，数据被浏览器给拦截了。

3.跨域与代理示意图

示意图

二、React中解决方法一

1.背景

• 假如前端的访问地址是:http://localhost:3000
• 假如后端接口地址是：http://localhost:5000/2.php

2.在package.json中配置proxy

//配置
"proxy": "http://localhost:5000"  //配置实际的接口域名或端口

3.请求的代码

//使用
import React, { Component } from 'react'
import axios from 'axios'

export default class App extends Component {

  getData = () => {
    //此处的端口要修改成与前端访问域名一致的端口
    axios.get('http://localhost:3000/2.php').then(success => {
      console.log(success)
    }, err => {
      console.log(err)
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.getData}>点我获取数据</button>
      </div>
    )
  }
}

4.请求结果

结果

三、React中解决方法二

1.背景

• 假如前端的访问地址是:http://localhost:3000
• 假如后端接口地址是：http://localhost:5000/2.php

2.在src目录中创建setupProxy.js文件

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

module.exports = function (app) {
    app.use(
        //可以配置多个proxy
        proxy('/api1', { //api1是需要转发的请求(所有带/api1前缀的请求都会转发给5000)
            target: 'http://localhost:5000',//配置转发目标地址（能返回数据的服务器地址）
            changeOrigin: true,//控制服务器接收到的请求头中的host字段的值
            pathRewrite: { '^/api1': '' } //去除请求前缀，保证交给后台服务器的是正常请求地址（必须配置）
        }),
        //可以配置多个proxy
        proxy('/api2', {
            target: 'http://localhost:5000',
            changeOrigin: true,
            pathRewrite: { '^/api2': '' }
        })
    )
}

3.请求的代码

//使用
import React, { Component } from 'react'
import axios from 'axios'

export default class App extends Component {

  getData = () => {
    //此处的端口要修改成与前端访问域名一致的端口，并且要加path前缀api1
    axios.get('http://localhost:3000/api1/2.php').then(success => {
      console.log(success)
    }, err => {
      console.log(err)
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.getData}>点我获取数据</button>
      </div>
    )
  }
}

4.请求结果

结果

四、备注

1.本文参考：https://www.bilibili.com/video/BV1wy4y1D7JT?p=65