react跨域問題403

跨域其實挺簡單的，不做多的解釋，直接寫解決方法

react

react版本（"react": "^16.10.2"）

首先需要下載axios

yarn add axios

測試代碼如下，很簡單

//App.js
import React from 'react';
import axios from 'axios'
import './aaa.less';

function App() {
    let c = ()=>{
        axios({
            method: 'get',
            url: 'http://192.168.5.140:9000/crm/api/sysUser/code',
            data: {
            }
        }).then((res)=>{
            console.log(res)
        }).catch((e)=>{
            console.log(e)
        })
    };
  return (
    <div className="App">
      <button onClick={c}>測試</button>
    </div>
  );
}

export default App;

點擊按鈕效果可以看見403

解決方法一：

測試代碼的請求路徑更改

//App.js
//...
axios({
            method: 'get',
            url: '/sysUser/code',        //刪除前面的
            data: {
            }
        }).then((res)=>{
            console.log(res)
        }).catch((e)=>{
            console.log(e)
        })

package.json文件中添加，這裏的proxy只能是字符串

"proxy":"http://192.168.5.140:9000/crm/api"

解決方法二

下載依賴包：http-proxy-middleware

yarn add http-proxy-middleware

在src下面創建setupProxy.js

//setupProxy.js
const proxy = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        proxy(
            '/api',
            {
                target: 'http://192.168.5.140:9000/crm',
                changeOrigin: true
            }
        )
    );
};

 

解決後效果

參考鏈接：https://create-react-app.dev/docs/proxying-api-requests-in-development/

寫得不是很詳細，爲了給自己做個筆記。