技術標籤：Reactreact

一、配置原因

前端頁面的埠號為3000，請求的伺服器的埠號也得為3000。如果伺服器的埠號為5000，就會出現跨域問題。


請求可以過去，但是響應回不來。為了解決這種問題，就要配置代理。

二、配置代理

代理的埠號和前端的埠號是一樣的，前端程式碼開啟後，會執行一個小的代理伺服器。跨域問題是因為ajax引起的，所以埠號為3000的代理伺服器可以收到來自埠號為5000的伺服器的response,進而轉發給前端。

方法1、package.json中配置’proxy’

1）在檔案中配置’proxy‘

2）修改請求的埠號為3000

優點：配置簡單，前端請求資源時可以不加任何字首。
缺點：不能配置多個代理。

方法2、在src下建立配置檔案：src/setupProxy.js

1）、在src資料夾下建立setupProxy.js檔案，檔名必須是’setupProxy.js’，webpack會找該檔案，進而配置代理。
2）在檔案中編寫程式碼

const proxy = require('http-proxy-middleware')
module.exports=function(app){
    app.use(
        proxy('/api1',{ //如果public檔案中沒有某個檔案，往後找，遇見/api1字首的請求，就會觸發該代理設定
 

            target:'http://localhost:5000', //請求轉發給誰
            changeOrigin:true, //控制伺服器收到的請求頭中Host欄位的值
            /*
         	changeOrigin設定為true時，伺服器收到的請求頭中的host為：localhost:5000
         	changeOrigin設定為false時，伺服器收到的請求頭中的host為：localhost:3000
         	changeOrigin預設值為false，但我們一般將changeOrigin值設為true,因為如果伺服器設定的比較嚴格，host為3000時的請求會被限制
         */
 

            pathRewrite:{'^/api1':''} //重寫請求路徑(必須寫)
        }),
        proxy('/api2',{
            target:'http://localhost:5001',
            changeOrigin:true,
            pathRewrite:{'^/api2':''}
        })
    )
}

3)、修改請求

import React, { Component } from 'react'
import axios from 'axios'

export default class App extends Component {
    getStudentsData=() => {
        axios.get('http://localhost:3000/api1/students').then( //走代理的請求
            response=>{console.log('成功了',response.data);},
            error=>{console.log('失敗了',error)}
        )
    }
    getCarsData=() => {
        axios.get('http://localhost:3000/cars').then( //不走代理的請求
            response=>{console.log('成功了',response.data);},
            error=>{console.log('失敗了',error)}
        )
    }
    render(){
        return (
            <div>
                <button onClick={this.getStudentsData}>點我獲取學生資料</button>
                <button onClick={this.getCarsData}>點我獲取汽車資料</button>
            </div>
        )
    }

    
}

優點：可以配置多個代理，可以靈活的控制請求是否走代理。
缺點：配置繁瑣，前端請求資源時必須加字首。