当前位置: 首页 > 知识库问答 >
问题:

使用Access-Control-Allow-Origin访问REST失败

丌官丰羽
2023-03-14
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.
{"id":"d83badf3","language":"en","categoryId":"a5","title":"Simcity","created":1527723183880,"modified":1527723183880}
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);
  }
}
export class Tour {
    id: string;
    language: string;
    categoryId: string;
    created: Date;
    modified: Date;
    title: string;
    content: string;
}

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?

共有1个答案

郦良才
2023-03-14

这个问题与angular本身无关,而是与您使用的web服务器有关。

angular http客户机请求在到达实际请求之前总是有一个带有类型选项的飞行前请求。

您可能需要将OPTIONS request方法添加到该行

   .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
 类似资料:
  • Access-Control-Allow-Origin响应 header 指示是否该响应可以与具有给定资源共享原点。 Header type Response header Forbidden header name no 语法 Access-Control-Allow-Origin: *Access-Control-Allow-Origin: <origin> 指令 * 对于没有凭据的请求,服务

  • XMLHttpRequest无法加载http://localhost:8080/nobelgrid/api/users/create/。请求的资源上没有“访问-控制-允许-来源”标头。因此,不允许访问源'http://localhost:63342'。响应的HTTP状态代码为500。 谁能帮帮我吗? 更新: 但我还有一个错误。我会做另一个问题,因为我认为这是一个不同的论点。 提前感谢!

  • null 服务器的响应如下: XMLHttpRequest无法加载http://nqatalog.negroesquisso.pt/login.php。Access-Control-Allow-Origin不允许Origin 。 如何解决此问题?

  • 问题内容: 我正在尝试使用以下代码获取我的instagram feed 我得到的错误是 所请求的资源上没有“ Access-Control-Allow-Origin”标头。 有没有解决的办法? 问题答案: Instagram API支持,因此添加到url并添加到调用中,如下所示:

  • Response.AddHeader(“Access-Control-Allow-Origin”,“*”)是如何实现的;行设置多个标题时,包括,但没有当我删除它?

  • 问题内容: 这可能是一个简单的(一系列)问题,但我无法解决。 我正在尝试从托管在我网站上的Web应用程序访问github api。简而言之,这是代码: 如果我将浏览器指向在我的保管箱帐户上载的这个简单页面,则一切正常。相反,如果我将浏览器指向该网站上上传的这个简单页面,则会得到臭名昭著的异常: 因此,问题是: 为什么在Dropbox上可以使用? 我了解使用CORS即使在网站上也可以使用。这是我的A