egg3.0项目：前端demo连接egg跨域解决

react-demo 随便写的

import axios from 'axios';
import { useEffect, useState } from 'react';
import './App.css';

function App() {

  const [sum, setSum] = useState(0)
  const [count, setCount] = useState(1)

  const handleItem = () => {
    setSum((sum) => sum + 1)
  }

  const handleItemV = () => {
    setCount(count + 1)
  }

  useEffect(() => {
    console.log('init', window);
    axios.get('http://localhost:55555/').then((res) => {
      console.log('res',res);
      
    })
  }, [])

  useEffect(() => {
    console.log('sum', sum);
  }, [sum])

  return (
    <div className="App" >
      <div className='state_box body'>
        <p>Sum {sum}</p>

        <p>Count {count}</p>
      </div>
      <div className='parent_box' id='parent_box'>
        <div className='box' id='box'
          onClick={() => {
            console.log('box');

          }}>
          this is a pencil
        </div>
      </div>
      <button onClick={handleItem} >button- sum</button>
      <div>
        <button onClick={handleItemV} >button - count</button>

      </div>
    </div>
  );
}

export default App;

egg项目

安装

npm install --save egg-cors

config\config.default.js

'use strict';

/**
 * @param {Egg.EggAppInfo} appInfo app info
 */
module.exports = appInfo => {
  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {
    // 支持post请求
    security: {
      csrf: {
        enable: false,
      },
    },
    cluster: {
      listen: {
        port: 55555,
        hostname: '127.0.0.1', // 不建议设置 hostname 为 '0.0.0.0'，它将允许来自外部网络和来源的连接，请在知晓风险的情况下使用
      },
    },
    mongoose: {
      client: {
        // 链接到本地的MongoDB，note是我本地数据库的名字
        url: 'mongodb://127.0.0.1:27017/note',
        options: {
          // dbName: 'note',
          // useNewUrlParser: true,
          useUnifiedTopology: true,
        },
      },
    },
    view: {
      defaultViewEngine: 'nunjucks',
      mapping: {
        '.tpl': 'nunjucks',
      },
    },
    multipart: {
      mode: 'stream',
      whitelist: [ '.txt', '.css', '.xml' ],
      fileSize: '50mb',
    },
    bodyParser: {
      jsonLimit: '1mb',
      formLimit: '1mb',
    },
    cors: {
      origin: '*', // 跨任何域
      allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS', // 被允许的请求方式
    },
  };

  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1682063943419_2410';

  // add your middleware config here
  config.middleware = [];

  // add your user config here
  const userConfig = {
    // myAppName: 'egg',
  };

  return {
    ...config,
    ...userConfig,
  };
};

config\plugin.js

'use strict';

/** @type Egg.EggPlugin */
module.exports = {
  mongoose: {
    enable: true,
    package: 'egg-mongoose',
  },
  nunjucks: {
    enable: true,
    package: 'egg-view-nunjucks',
  },
  oss: {
    enable: true,
    package: 'egg-oss',
  },
  cors: {
    enable: true,
    package: 'egg-cors',
  },
};