英文:
Angluar client cant resolve json from spring boot because of cors error
问题
我想创建一个Angular客户端，从本地的Spring Boot服务器查询一些JSON数据。
我的HTTP Angular服务如下所示：
export class ProductService {
private baseUrl = 'http://localhost:8080/priceoffer24/api/product';
constructor(private http: HttpClient) { }
public getProductById(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/products/${id}`);
}
public getProductByName(name: string): Observable<any> {
return this.http.get(`${this.baseUrl}/products/${name}`);
}
// ... 其他方法 ...
public getProductsBySubcategorieAndCategorie(subcategorie: string, categorie: string): Observable<any> {
return this.http.get(`${this.baseUrl}/products/subcategorie/${subcategorie}/categorie/${categorie}`);
}
}
我的问题是我遇到了以下跨域错误。
Access to XMLHttpRequest at 'http://localhost:8080/priceoffer24/api/product/products/newest' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我应该在我的Angular应用程序或者我的Spring Boot应用程序中做哪些更改？
英文:
I want to create an angular client, which querys some json from a localhost spring boot server.
my HTTP Angluar service looks so:
export class ProductService {
private baseUrl = 'http://localhost:8080/priceoffer24/api/product';
constructor(private http: HttpClient) { }
public getProductById(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/products/${id}`);
}
public getProductByName(name: string): Observable<any> {
return this.http.get(`${this.baseUrl}/products/${name}`);
}
public getProductByBrand(brand: string): Observable<any> {
return this.http.get(`${this.baseUrl}/products/brand/${brand}`);
}
public getProductsList(): Observable<any> {
return this.http.get(`${this.baseUrl}/products`);
}
public getProductsNewest(): Observable<any> {
return this.http.get(`${this.baseUrl}/products/newest`);
}
public getProductsRandom(): any {
return this.http.get(`${this.baseUrl}/products/random`);
}
public getProductsBySubcategorie(subcategorie: string): Observable<any> {
return this.http.get(`${this.baseUrl}/products/subcategorie/${subcategorie}`);
}
public getProductsBySubcategorieId(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/products/subcategorie/${id}`);
}
public getProductsByCategorie(categorie: string): Observable<any> {
return this.http.get(`${this.baseUrl}/products/categorie/${categorie}`);
}
public getProductsByCategorieId(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/products/categorie/${id}`);
}
public getProductsBySubcategorieAndCategorie(subcategorie: string, categorie: string): Observable<any> {
return this.http.get(`${this.baseUrl}/products/subcategorie/${subcategorie}/categorie/${categorie}`);
}
}
My problem is now that I get the following cors error.
Access to XMLHttpRequest at 'http://localhost:8080/priceoffer24/api/product/products/newest' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What do I have to change in my angular app, or in my spiring boot app ?
答案1
得分: 1
问题不在Angular应用程序中，你需要将客户端应用程序的URL（默认应为http://localhost:4200）添加到Api服务器（Spring Boot）中的允许源列表中。
因此，要解决这个问题，只需搜索如何修复服务器端的问题。
可能这个链接有帮助：https://spring.io/guides/gs/rest-service-cors/
英文:
The issue isn't in the Angular App, you have to add your client app URL (default should be http://localhost:4200) to the Allowed Origins in the Api Server (spring boot).
So to resolve this just search how to fix the server side.
Probably this can help https://spring.io/guides/gs/rest-service-cors/
答案2
得分: 0
使用@CrossOrigin(origins = "http://example.com")来覆盖你的Spring Boot REST控制器。
这里的**http://example.com**指的是Angular应用的URL（客户端应用）。这样做将只允许特定的应用访问你的应用。
如果你想允许所有主机访问你的控制器，只需直接使用@CrossOrigin。
英文:
Use @CrossOrigin(origins = "http://example.com") over your spring boot rest controller.
Here http://example.com refers to angular app URL (Client App). Doing this will allow only the particular application to access your application.
If you want to allow all hosts to access your controller then just use @CrossOrigin directly.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论