![](/img/trans.png)
[英]Problem with 'Access-Control-Allow-Origin' while developing Angular7 REST web app
[英]Angular 6 accessing REST failing with Access-Control-Allow-Origin
因此,我嘗試使用http: HttpClient
from '@angular/common/http'
將來自 REST 源的數據加載到我的 Angular 6 應用程序中。 使用ng serve --open
在瀏覽器中調用應用程序並不能完成這項工作。 我認為 CORS 是這里的問題。 我想我要么必須使用Access-Control-Allow-Origin
或其他東西設置服務器或客戶端標頭,但我已經嘗試了多種方法,但沒有成功使這個簡單的 REST 調用工作。 所以下面是我編碼的內容。
在瀏覽器中調用 Angular 應用會響應以下錯誤:
Failed to load http://localhost:8080/mysite-backend/rest/report/single/d83badf3:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:4200' is therefore not allowed
access.
在 Chrome 瀏覽器中調用相同的 URL ( http://localhost:8080/mysite-backend/rest/report/single/d83badf3
) 可以正常工作:
{"id":"d83badf3","language":"en","categoryId":"a5","title":"Simcity","created":1527723183880,"modified":1527723183880}
在 Angular 6 中,我使用了通過ng generate service tour
生成的以下服務類。 在其中我創建了getTour(id: string)
方法, getTour(id: string)
在 URL 上調用 REST 並將檢索到的 JSON 字符串作為 Tour 對象返回:
import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Tour } from './tour';
import { catchError, tap } from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
@Injectable({
providedIn: 'root'
})
export class TourService {
// URL to the web api.
private tourUrl = 'http://localhost:8080/mysite-backend/rest/report';
constructor(
private http: HttpClient
) { }
/**
*
* @param id: string GET tour report by id. Will 404 if id not found.
*/
getTour(id: string): Observable<Tour> {
httpOptions.headers.append('Access-Control-Allow-Origin', 'http://localhost:8080');
httpOptions.headers.append('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
httpOptions.headers.append('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
httpOptions.headers.append('Access-Control-Allow-Credentials', 'true');
const url = `${this.tourUrl}/single/${id}`;
console.log("XXX URL GET " + url)
return this.http.get<Tour>(url, httpOptions).pipe(
tap(_ => this.log(`fetched tour id=${id}`)),
catchError(this.handleError<Tour>(`getHero id=${id}`))
);
}
private handleError<T> (operation = 'operation', result?: T) {
return (error, any): Observable<T> => {
console.error(error);
this.log(`${operation} failed: ${error.message}`);
return of(result as T);
};
}
private log(message: string) {
console.log("Log message: " + message);
}
}
這是Tour
對象:
export class Tour {
id: string;
language: string;
categoryId: string;
created: Date;
modified: Date;
title: string;
content: string;
}
我還將HttpClientModule
從'@angular/common/http'
到imports
數組和app.module.ts
的providers
數組。
RESTful WebService 是用 Java 構建的。 在這里,我有getReport(@PathParam("reportId") String reportId)
方法,即得到一個Report
對象和內返回其Reponse
:
import java.util.List;
import javax.inject.Inject;
import javax.servlet.http.HttpServletRequest;
import javax.ws.rs.Consumes;
import javax.ws.rs.DELETE;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
/**
* Describes the RESTful access for reports.
*/
@Path("/report")
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public class ReportResource {
@Inject
private Logger logger;
@GET
@Path("/single/{reportId}")
public Response getReport(@PathParam("reportId") String reportId) {
//return Mock.getReport(reportId);
return Response.ok() // 200
.entity(Mock.getReport(reportId))
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
.allow("OPTIONS").build();
}
...
}
我必須做什么才能從 Angular 6 客戶端成功調用 Java RESTful WebService?
該問題與 angular 本身無關,而是與您使用的 Web 服務器有關。
在點擊實際請求之前,angular http 客戶端請求總是有一個帶有類型選項的預檢請求。
您可能需要在此行中添加 OPTIONS 請求方法
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
我幾乎花了一天時間來解決問題。 首先我認為問題來自角度方面,但似乎問題來自服務器端。 您需要在 get 方法上方添加 @CrossOrigin 注釋。
@GET
@CrossOrigin(origins = "http://localhost:4200")
@Path("/single/{reportId}")
public Response getReport(@PathParam("reportId") String reportId) {
//return Mock.getReport(reportId);
return Response.ok() // 200
.entity(Mock.getReport(reportId))
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
.allow("OPTIONS").build();
}
我在客戶端角度應用程序上浪費了將近一天的時間,但問題實際上是在服務器端 nodejs 應用程序上允許 CORS。
app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });
以下步驟幫助我解決了這個問題:
1- 在項目根目錄下創建proxy.conf.json
文件而不是 src 文件夾
3- 在proxy.conf.json
文件中添加如下代碼。
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
4-在腳本"start": ng serve --proxy-config proxy.conf.json
下的package.json
准確添加"start": ng serve --proxy-config proxy.conf.json
5- 使用npm start
而不是ng serve
我使用代理解決了 CORS 問題。
{ "/api/*": { "target": "http://external-domain-you-wanted-to-access", "secure": false, "changeOrigin": true } }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.