One post tagged with "跨域"

react axios post 请求跨域

March 15, 2023 · 3 min read

Scott

BMK

create-react-app用get向后端发送请求的时候是OK的，但是换成post请求就会报跨域请求的错误--CORS

参考官网有2种解决方法:

这里演示如何将 http://127.0.0.1:3001 以 /test开始的api代理到http://127.0.0.1:8002

方案1：修改package.json：

添加一行配置，但是react新版只支持字符串的配置，这就意味着如果你无法请求多个域名的api

"proxy": "http://localhost:8002",

注意：此时，前端请求的时候就不用加BASE_URL了

方案2：创建src/setupProxy.js，注意必须是这个文件名

npm i http-proxy-middleware --save

创建src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/test',
    createProxyMiddleware({
      target: 'http://127.0.0.1:8002',
      changeOrigin: true,
    })
  );
};

此时再去发动post请求:

import React, { Component } from 'react'
import pageStyle from '../../page.module.css'
// import homeStyle from './index.module.css'
import axios from "axios";
export default class ExampleHome extends Component {
    state = {
        arr:[]
    }
    componentDidMount() {
        axios.post("/test/1",{}).then(
            res=>{
                console.log(res.data.data)
                this.setState({
                    arr : res.data.data
                })
            },
            err=>{}
        )
    }

    render() {
        return (
            <div className={pageStyle.container}>
                {
                    this.state.arr.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </div>
        )
    }
}

发现没有报错了，页面可以正常显示

值得注意的是， npm run build之后，代理是失效的，需要借助nginx caddy等代理工具完成代理

有人说请求的时候把`BASE_URL`加上不就行了，我们来试试?

修改前端react代码：

import React, { Component } from 'react'
import pageStyle from '../../page.module.css'
// import homeStyle from './index.module.css'
import axios from "axios";
export default class ExampleHome extends Component {
    state = {
        arr:[]
    }
    componentDidMount() {
        const BASE_URL = "http://127.0.0.1:8002"
        axios.post(`${BASE_URL}/test/1`,{}).then(
            res=>{
                console.log(res.data.data)
                this.setState({
                    arr : res.data.data
                })
            },
            err=>{}
        )
    }

    render() {
        return (
            <div className={pageStyle.container}>
                {
                    this.state.arr.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </div>
        )
    }
}