Hỏi đáp
Chia sẻ kiến thức, cùng nhau phát triển
Angular4 Lỗi 500 (Internal Server Error)
21:29 20-01-2018
1.455 lượt xem
3 bình luận
17:38 21-01-2018
Mình mới học Angular 4 để chuẩn bị cho dự án sắp vào nhưng bị lỗi phần CRUD angular với web ASP.NET MVC API.
Mình lấy dữ liệu trong phần xử lý trong service như sau:
@Injectable()
export class CatalogService {
selectedCatalog: Catalog;
catalogList: Catalog[];
constructor(public http: Http) { }
getCatalogList(){
this.http.get('http://localhost:28750/api/Catalogs/')
.map((data : Response) =>{
return data.json() as Catalog[];
}).toPromise().then(x => {
this.catalogList = x;
})
}
}Phía bên Web API mình có thiết lập
var corsAttr = new EnableCorsAttribute("http://localhost:4200", "*", "*");
config.EnableCors(corsAttr);Xem forums sửa lỗi đủ kiểu nhưng vẫn lỗi. Ai đã fix bug này được cho xin ý kiến với.Cảm ơn nhiều lắm luôn!
Mình đã fix lỗi. Nguyên nhân là :
1) Mình không biết dùng từ sao cho đúng nên tạm gọi là khi Angular gọi đến method xử lý bên phía Web API trong các controller theo link truyền và theo một method là get,post,delete,... thì bên web API trong AppStart > WebApiConfig.cs phải thiết lập mở cổng cho Angular.
Y/c cài thêm Nutget "Cors" nha.
2) Tiến hành Run thử web API gọi đến phương thức đang muốn thực hiện từ bên Angular xem ntn. Nếu Show ra XML hợp lệ, tức show được dữ liệu dạng XML là ok. Còn không thì các bạn phải thiết lập trong Database mà WebAPI kết nối đến (mình dùng EntityFramework Code Firse) thì vào file DbContext của database thêm vào:
3) Khi bên phía App Angular xuất hiện lỗi 500 (Internal Server Error) nó chia thành nhiều hướng (do tự mò cho = được nên mất 1 ngày :(( ) , Inspect trang Angular 4200 qua phía Network > Tìm file đang muốn lấy dữ liệu qua nó nếu thấy màu đỏ tức là không binding được dữ liệu từ bên WebAPI, nhấp vào qua phần Preview thì không thấy dữ liệu dạng mảng hay chuỗi gì đó show ra nó nếu còn sai sẽ xuất hiện thông báo lỗi.
3) 500 (Internal Server Error) kèm thêm "Only one header....." thì cái này là do bên Web API bạn thiết lập nhiều lần cái EnableCors(new EnableCorsAttribute...) nên nó trả về tới 2 header > Angular lỗi.
> Đây là bug mình mất 1 ngày do luxubu nên hy vọng góp ý trên giúp ai mắc phải giải quyết nhanh hơn..
lỗi 500 là controller lỗi bạn. debug bên trong xem nó chết góc nào