Javascript React和Axios:Axios可以'；由于CORS策略，无法访问Java/SpringBoot REST后端服务
我正在使用React、node.js，这是我第一次使用Axios连接到localhost:8080上的Java/SpringBoot Rest GET服务（fetch all），该服务将保存的用户列表作为JSON数组返回。我试图实现的是使用Axios GET成功连接和检索REST数据，但我遇到以下错误：Javascript React和Axios:Axios可以'；由于CORS策略，无法访问Java/SpringBoot REST后端服务,javascript,reactjs,axios,cors,Javascript,Reactjs,Axios,Cors,我正在使用React、node.js，这是我第一次使用Axios连接到localhost:8080上的Java/SpringBoot Rest GET服务（fetch all），该服务将保存的用户列表作为JSON数组返回。我试图实现的是使用Axios GET成功连接和检索REST数据，但我遇到以下错误： Failed to compile src\App.js Line 16:7: 'setIsLoaded' is not defined no-undef Line 17:7:
Failed to compile
src\App.js
Line 16:7: 'setIsLoaded' is not defined no-undef
Line 17:7: 'setRowData' is not defined no-undef
Line 35:13: 'rowData' is not defined no-undef
import React, { useEffect } from "react";
import { axios } from 'axios';
import { jsonServerRestClient, Admin, Resource, Delete } from 'admin-on-rest';
import { DataGrid } from '@material-ui/data-grid';
export default function App() {
useEffect(() => {
const apiurl = "http://localhost:8080/user/all";
axios
.get(apiurl)
.then((response) => response.data)
.then((data) => {
setIsLoaded(true);
setRowData(data);
});
}, []);
const columns = [
{ field: "id", headerName: "ID", width: 10 },
{ field: "userName", headerName: "Name", width: 170 },
{ field: "userTelNo", headerName: "Tel No", width: 70 },
{ field: "userEmail", headerName: "EMail", width: 100 },
{ field: "userRole", headerName: "Role", width: 100 },
];
return(
<DataGrid
rows={rowData}
columns={columns}
id="id"
pageSize={15}
checkboxSelection
/>
);
}
import React from 'react';
import { axios } from 'axios';
export default function App() {
const axios = require('axios').default;
axios.get('http://localhost:8080/user/all')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
return null;
}
因此，我想我必须找到一种方法，让我的JavaSpringBoot后端用户REST服务“授予”用户权限http://localhost:3000 访问它。有人知道如何做到这一点吗？您提到您将在chrome控制台中获得此功能
Access to XMLHttpRequest at 'http://localhost:8080/user/all' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
所以添加这个注释
@CrossOrigin(origins = "http://localhost:3000")
如果希望允许来自spring boot server上任何源的请求，请将跨源注释修改为
@CrossOrigin(origins = "*")
你提到你是在chrome控制台上得到这个的
Access to XMLHttpRequest at 'http://localhost:8080/user/all' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
所以添加这个注释
@CrossOrigin(origins = "http://localhost:3000")
如果希望允许来自spring boot server上任何源的请求，请将跨源注释修改为
@CrossOrigin(origins = "*")
在前端，我看不到组件中声明了任何状态，这就是为什么会出现错误 未能编译 src\App.js第16:7行：未定义“setIsLoaded”无未定义
第17:7行：“setRowData”未定义无未定义第35:13行： 未定义“rowData”无未定义 您需要先添加状态
import {useState} from "react";
export default function App() {
const [isLoaded,setIsLoaded] = useState(false); // isLoaded State
const [rowData,setRowData] = useState([]); //rowData State
useEffect(() => {
const apiurl = "http://localhost:8080/user/all";
axios
.get(apiurl)
.then((response) => response.data)
.then((data) => {
setIsLoaded(true);
setRowData(data);
});
}, []);
const columns = [
{ field: "id", headerName: "ID", width: 10 },
{ field: "userName", headerName: "Name", width: 170 },
{ field: "userTelNo", headerName: "Tel No", width: 70 },
{ field: "userEmail", headerName: "EMail", width: 100 },
{ field: "userRole", headerName: "Role", width: 100 },
];
return(
<DataGrid
rows={rowData}
columns={columns}
id="id"
pageSize={15}
checkboxSelection
/>
);
}
从“react”导入{useState}；
导出默认函数App（）{
const[isLoaded，setIsLoaded]=useState（false）；//isLoaded状态
const[rowData，setRowData]=useState（[]）；//rowData状态
useffect（（）=>{
常量apiurl=”http://localhost:8080/user/all";
axios
.get（apirl）
.然后（（响应）=>response.data）
。然后（（数据）=>{
setIsLoaded（真）；
setRowData（数据）；
});
}, []);
常量列=[
{字段：“id”，标题名：“id”，宽度：10}，
{字段：“用户名”，标题名：“名称”，宽度：170}，
{字段：“用户电话号码”，标题名：“电话号码”，宽度：70}，
{字段：“用户电子邮件”，标题名：“电子邮件”，宽度：100}，
{字段：“用户角色”，标题名：“角色”，宽度：100}，
];
报税表（
);
}
第17:7行：“setRowData”未定义无未定义第35:13行： 未定义“rowData”无未定义 您需要先添加状态
import {useState} from "react";
export default function App() {
const [isLoaded,setIsLoaded] = useState(false); // isLoaded State
const [rowData,setRowData] = useState([]); //rowData State
useEffect(() => {
const apiurl = "http://localhost:8080/user/all";
axios
.get(apiurl)
.then((response) => response.data)
.then((data) => {
setIsLoaded(true);
setRowData(data);
});
}, []);
const columns = [
{ field: "id", headerName: "ID", width: 10 },
{ field: "userName", headerName: "Name", width: 170 },
{ field: "userTelNo", headerName: "Tel No", width: 70 },
{ field: "userEmail", headerName: "EMail", width: 100 },
{ field: "userRole", headerName: "Role", width: 100 },
];
return(
<DataGrid
rows={rowData}
columns={columns}
id="id"
pageSize={15}
checkboxSelection
/>
);
}
从“react”导入{useState}；
导出默认函数App（）{
const[isLoaded，setIsLoaded]=useState（false）；//isLoaded状态
const[rowData，setRowData]=useState（[]）；//rowData状态
useffect（（）=>{
常量apiurl=”http://localhost:8080/user/all";
axios
.get（apirl）
.然后（（响应）=>response.data）
。然后（（数据）=>{
setIsLoaded（真）；
setRowData（数据）；
});
}, []);
常量列=[
{字段：“id”，标题名：“id”，宽度：10}，
{字段：“用户名”，标题名：“名称”，宽度：170}，
{字段：“用户电话号码”，标题名：“电话号码”，宽度：70}，
{字段：“用户电子邮件”，标题名：“电子邮件”，宽度：100}，
{字段：“用户角色”，标题名：“角色”，宽度：100}，
];
报税表（
);
}
从哪里来？代码设置是否正确，例如const[isLoaded，setIsLoaded]=useState（false）。？如果我只是去掉setIsLoaded（true）中的行；和setRowData（数据）；直接使用数据，可能吗？我可以告诉你的代码在做什么，但不能告诉它应该做什么。这三个未定义的变量setIsLoaded
、setRowData
和rowData
应该来自哪里？它们是来自道具
还是来自州
？我认为另一条评论是正确的，假设您打算包括const[rowData，setRowData]=useState（[]）但您没有。如果不将数据存储到状态，则无法直接使用useffect
挂钩中的数据。变量data
是一个局部变量，它只存在于useffect
回调的上下文中。您不能在组件的返回中使用它。例如setIsLoaded
来自哪里？代码设置是否正确，例如const[isLoaded，setIsLoaded]=useState（false）。？如果我只是去掉setIsLoaded（true）中的行；和setRowData（数据）；直接使用数据，可能吗？我可以告诉你的代码在做什么，但不能告诉它应该做什么。这三个未定义的变量setIsLoaded
、setRowData
和rowData
应该来自哪里？它们是来自道具
还是来自州
？我认为另一条评论是正确的，假设您打算包括const[rowData，setRowData]=useState（[]）但您没有。无法使用