0
点赞
收藏
分享

微信扫一扫

react axios配置代理(proxy),解决本地开发时的跨域问题

RJ_Hwang 2022-02-22 阅读 66
react.js

本文基于 react 17.x 版本

安装axios

npm install axios 

1.输入命令 npm run eject
运行报错的话点这里

2.打开 config 文件夹下的 webpackDevServer.config.js 文件
在这里插入图片描述
3.进行搜索 proxy ,在这里插入图片描述
将代码改成

proxy: {
// ‘/api’可以更改其他比如‘/ps’
      "/api": {
        target: "http://lochost:3000", // 后台服务地址以及端口号
        ws: true,
        changeOrigin: true, //是否跨域
        pathRewrite: { "^/api": "/" },
      },
    },

5.在项目中使用, /api + 后台接口地址

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

class App extends Component {
  componentDidMount() {
    axios.get('/api/login')
      .then(res => {
        console.log(res);
      })
  }
}

export default App;
举报

相关推荐

0 条评论