无法建立从 React 前端到 Express 后端的代理连接

Question

我在使用 POST 方法从 React 前端发送 JSON object 到 Express 后端时遇到问题。 提交表单时出现以下错误：CORS 策略已阻止从来源“http://localhost:8080/create”访问 XMLHttpRequest 策略：对预检请求的响应不t 通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”header。

任何帮助都感激不尽。 由于安全隐患，我不想启用 CORS，并且在 React 项目的 package.json 中设置代理参数不起作用。

这是我的一些代码：

const handleSubmit = e => {
    e.preventDefault(); 

   if(entry !== "" && dueDate > Date.now()){
       console.log({entryDate: entryDate, entry: entry, dueDate: dueDate});
    axios({
        method: 'post',
        url: 'http://localhost:8080/create',
        data: {
          entryDate: entryDate,
          entry: entry,
          dueDate: dueDate
        }
      })
        .then(response => response.json)
        .then(data => {
            console.log(`Success:: ${data}`)
        })
        .catch(e => {
            console.log(`error: ${e}`)
        })
        toggle();
    
   } else {
       console.log("error")
   }


}
    <div>
        <Modal toggle={toggle} isOpen={modal} >
            <ModalHeader>Create Item</ModalHeader>
            <ModalBody>
                <Form>
                    <FormGroup>
                        <Label for="date">Date</Label>
                            <DatePicker id="entryDate" name="entryDate" onChange={onEntryDateChange} selected={entryDate}/>
                    </FormGroup>
                    <FormGroup>
                        <Label for="TODO">TODO</Label>
                        <Input type="textarea"
                            id="entry"
                            name="entry"
                            placeholder="Enter TODO here" 
                            onChange={onEntryChange}/>
                    </FormGroup>
                    <FormGroup>
                    <Label for="dueDate">Due date</Label>
                            <DatePicker id="dueDate" name="dueDate"onChange={onDueDateChange} selected={dueDate}/>
                    </FormGroup>
                </Form>
            </ModalBody>
            <ModalFooter>
                <Button color="success" block type="submit" onClick={handleSubmit}>Create <FontAwesomeIcon icon={faPlus} size="sm"/></Button>
            </ModalFooter>
        </Modal>
    </div>
)

}

// package.json - 我已将代理设置为 localhost:8080: ...

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:8080",'

...

Answer 1

解决了
我最终使用axios.post function 和 url 字符串，不包括排除 localhost:8080。 似乎因为它已经在package.json文件中指定了代理 url，所以在使用 axios 进行后调用时，我不必再次执行此操作。

这是更新后的代码：

axios
  .post('/create', data)
  .then((response) => response.json)
  .then((data) => {
    console.log(`Success:: ${data}`);
  })
  .catch((e) => {
    console.log(`error: ${e}`);
  });

无论如何谢谢！