Im getting this error when I try to fetch data from webapi to display in react js Here is a photo when I check the console this is what I get
here is my program.cs
JavaScript
x
48
48
1
using WebApp.Data;
2
3
var myAllowSpecificOrigins = "_myAllowSpecificOrigins";
4
5
var builder = WebApplication.CreateBuilder(args);
6
7
// Add services to the container.
8
9
builder.Services.AddControllers();
10
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
11
builder.Services.AddEndpointsApiExplorer();
12
builder.Services.AddSwaggerGen();
13
14
builder.Services.AddDbContext<DataContext>(options =>
15
{
16
options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"));
17
});
18
19
//Enable CORS
20
builder.Services.AddCors(options =>
21
{
22
options.AddPolicy(name: myAllowSpecificOrigins,
23
builder =>
24
{
25
builder.WithOrigins("http://localhost:3000/")
26
.AllowAnyMethod()
27
.AllowAnyHeader();
28
});
29
});
30
31
var app = builder.Build();
32
// Configure the HTTP request pipeline.
33
if (app.Environment.IsDevelopment())
34
{
35
app.UseSwagger();
36
app.UseSwaggerUI();
37
}
38
39
app.UseHttpsRedirection();
40
41
app.UseCors(myAllowSpecificOrigins);
42
43
app.UseAuthorization();
44
45
app.MapControllers();
46
47
app.Run();
48
here is one of my files employee.js
JavaScript
1
301
301
1
import {variables} from './variables.js';
2
3
export class Employee extends Component{
4
5
constructor(props){
6
super(props);
7
8
this.state={
9
departments:[],
10
employees:[],
11
modalTitle:"",
12
EmployeeId:0,
13
EmployeeName:"",
14
Department:"",
15
DateOfJoining:"",
16
17
}
18
}
19
20
refreshList(){
21
22
fetch(variables.API_URL+'employees')
23
.then(response=>response.json())
24
.then(data=>{
25
this.setState({employees:data});
26
});
27
28
fetch(variables.API_URL+'department')
29
.then(response=>response.json())
30
.then(data=>{
31
this.setState({departments:data});
32
});
33
}
34
35
componentDidMount(){
36
this.refreshList();
37
}
38
39
changeEmployeeName =(e)=>{
40
this.setState({EmployeeName:e.target.value});
41
}
42
changeDepartment =(e)=>{
43
this.setState({Department:e.target.value});
44
}
45
changeDateOfJoining =(e)=>{
46
this.setState({DateOfJoining:e.target.value});
47
}
48
49
addClick(){
50
this.setState({
51
modalTitle:"Add Employee",
52
EmployeeId:0,
53
EmployeeName:"",
54
Department:"",
55
DateOfJoining:"",
56
PhotoFileName:"anonymous.png"
57
});
58
}
59
editClick(emp){
60
this.setState({
61
modalTitle:"Edit Employee",
62
EmployeeId:emp.EmployeeId,
63
EmployeeName:emp.EmployeeName,
64
Department:emp.Department,
65
DateOfJoining:emp.DateOfJoining,
66
PhotoFileName:emp.PhotoFileName
67
});
68
}
69
70
createClick(){
71
fetch(variables.API_URL+'employee',{
72
method:'POST',
73
headers:{
74
'Accept':'application/json',
75
'Content-Type':'application/json'
76
},
77
body:JSON.stringify({
78
EmployeeName:this.state.EmployeeName,
79
Department:this.state.Department,
80
DateOfJoining:this.state.DateOfJoining,
81
PhotoFileName:this.state.PhotoFileName
82
})
83
})
84
.then(res=>res.json())
85
.then((result)=>{
86
alert(result);
87
this.refreshList();
88
},(error)=>{
89
alert('Failed');
90
})
91
}
92
93
94
updateClick(){
95
fetch(variables.API_URL+'employee',{
96
method:'PUT',
97
headers:{
98
'Accept':'application/json',
99
'Content-Type':'application/json'
100
},
101
body:JSON.stringify({
102
EmployeeId:this.state.EmployeeId,
103
EmployeeName:this.state.EmployeeName,
104
Department:this.state.Department,
105
DateOfJoining:this.state.DateOfJoining,
106
PhotoFileName:this.state.PhotoFileName
107
})
108
})
109
.then(res=>res.json())
110
.then((result)=>{
111
alert(result);
112
this.refreshList();
113
},(error)=>{
114
alert('Failed');
115
})
116
}
117
118
deleteClick(id){
119
if(window.confirm('Are you sure?')){
120
fetch(variables.API_URL+'employee/'+id,{
121
method:'DELETE',
122
headers:{
123
'Accept':'application/json',
124
'Content-Type':'application/json'
125
}
126
})
127
.then(res=>res.json())
128
.then((result)=>{
129
alert(result);
130
this.refreshList();
131
},(error)=>{
132
alert('Failed');
133
})
134
}
135
}
136
137
imageUpload=(e)=>{
138
e.preventDefault();
139
140
const formData=new FormData();
141
formData.append("file",e.target.files[0],e.target.files[0].name);
142
143
fetch(variables.API_URL+'employee/savefile',{
144
method:'POST',
145
body:formData
146
})
147
.then(res=>res.json())
148
.then(data=>{
149
this.setState({PhotoFileName:data});
150
})
151
}
152
153
render(){
154
const {
155
departments,
156
employees,
157
modalTitle,
158
EmployeeId,
159
EmployeeName,
160
Department,
161
DateOfJoining,
162
PhotoPath,
163
PhotoFileName
164
}=this.state;
165
166
return(
167
<div>
168
169
<button type="button"
170
className="btn btn-primary m-2 float-end"
171
data-bs-toggle="modal"
172
data-bs-target="#exampleModal"
173
onClick={()=>this.addClick()}>
174
Add Employee
175
</button>
176
<table className="table table-striped">
177
<thead>
178
<tr>
179
<th>
180
EmployeeId
181
</th>
182
<th>
183
EmployeeName
184
</th>
185
<th>
186
Department
187
</th>
188
<th>
189
DOJ
190
</th>
191
<th>
192
Options
193
</th>
194
</tr>
195
</thead>
196
<tbody>
197
{employees.map(emp=>
198
<tr key={emp.EmployeeId}>
199
<td>{emp.EmployeeId}</td>
200
<td>{emp.EmployeeName}</td>
201
<td>{emp.Department}</td>
202
<td>{emp.DateOfJoining}</td>
203
<td>
204
<button type="button"
205
className="btn btn-light mr-1"
206
data-bs-toggle="modal"
207
data-bs-target="#exampleModal"
208
onClick={()=>this.editClick(emp)}>
209
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pencil-square" viewBox="0 0 16 16">
210
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
211
<path fillRule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
212
</svg>
213
</button>
214
215
<button type="button"
216
className="btn btn-light mr-1"
217
onClick={()=>this.deleteClick(emp.EmployeeId)}>
218
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-trash-fill" viewBox="0 0 16 16">
219
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
220
</svg>
221
</button>
222
223
</td>
224
</tr>
225
)}
226
</tbody>
227
</table>
228
229
<div className="modal fade" id="exampleModal" tabIndex="-1" aria-hidden="true">
230
<div className="modal-dialog modal-lg modal-dialog-centered">
231
<div className="modal-content">
232
<div className="modal-header">
233
<h5 className="modal-title">{modalTitle}</h5>
234
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"
235
></button>
236
</div>
237
238
<div className="modal-body">
239
<div className="d-flex flex-row bd-highlight mb-3">
240
241
<div className="p-2 w-50 bd-highlight">
242
243
<div className="input-group mb-3">
244
<span className="input-group-text">Emp Name</span>
245
<input type="text" className="form-control"
246
value={EmployeeName}
247
onChange={this.changeEmployeeName}/>
248
</div>
249
250
<div className="input-group mb-3">
251
<span className="input-group-text">Department</span>
252
<select className="form-select"
253
onChange={this.changeDepartment}
254
value={Department}>
255
{departments.map(dep=><option key={dep.DepartmentId}>
256
{dep.DepartmentName}
257
</option>)}
258
</select>
259
</div>
260
261
<div className="input-group mb-3">
262
<span className="input-group-text">DOJ</span>
263
<input type="date" className="form-control"
264
value={DateOfJoining}
265
onChange={this.changeDateOfJoining}/>
266
</div>
267
268
269
</div>
270
<div className="p-2 w-50 bd-highlight">
271
<img width="250px" height="250px"
272
src={PhotoPath+PhotoFileName}/>
273
<input className="m-2" type="file" onChange={this.imageUpload}/>
274
</div>
275
</div>
276
277
{EmployeeId==0?
278
<button type="button"
279
className="btn btn-primary float-start"
280
onClick={()=>this.createClick()}
281
>Create</button>
282
:null}
283
284
{EmployeeId!=0?
285
<button type="button"
286
className="btn btn-primary float-start"
287
onClick={()=>this.updateClick()}
288
>Update</button>
289
:null}
290
</div>
291
292
</div>
293
</div>
294
</div>
295
296
297
</div>
298
)
299
}
300
}
301
I believe the issue has to deal with the CORS Policy, but have tried everything. Does anything stand out to anyone? What should I do to prevent this and to display data from webapi to react?
Advertisement
Answer
you have to remove a trailing “/”, should be
JavaScript
1
2
1
builder.WithOrigins("http://localhost:3000")
2