Question

我已经阅读了很多关于此的主题，但是它仍然行不通，这使我失去了头脑。

我有一个带有Spring Api的Angular6应用，当我调用它时，我一直遇到此错误：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

但是我觉得我做了所有事情：

这是我对Angular App中的api的调用：

getGamesFromServer() {
  const httpOptions = {
    headers: new HttpHeaders({
      'Access-Control-Allow-Origin':'*'
    })
  };

  this.httpClient
    .get<any[]>('http://localhost:8080/api/rest/v1/game/progress', httpOptions)
    .subscribe(
      (response) => {
        console.log(response);
        this.games = response;
        console.log(this.games);
        this.emitGameSubject();
      },
      (error) => {
        console.log('Erreur ! : ' + error);
      }
    );
}

这是一个叫做：的Java方法：

@RequestMapping(method = GET, value = "/progress")
@ResponseBody
public Response findAllAndProgress() {
    return Response.status(Response.Status.OK)
            .entity(gameService.findAllAndProgress())
            .header(ACCESS_CONTROL_ALLOW_ORIGIN, "*")
            .build();
}

我还启动了启用了--disable-web-security选项的chrome，并且我还下载了chrome扩展程序以允许CORS请求，但没有用

Answer 1

我认为这是因为Angular应用程序正在开发模式下运行，并且通过与Spring Webapp不同的端口提供服务。您可以使用为应用程序启动指定的proxy.conf.json文件（ng serve --proxy-config proxy.conf.json）解决此问题，也可以将@CrossOrigin(origins = "*")添加到弹簧控制器。

以下代码不起作用的原因：

@RequestMapping(method = GET, value = "/progress")
@ResponseBody
public Response findAllAndProgress() {
    return Response.status(Response.Status.OK)
        .entity(gameService.findAllAndProgress())
        .header(ACCESS_CONTROL_ALLOW_ORIGIN, "*")
        .build();
}

是因为该方法从未真正执行过添加头文件的操作。跨域请求在发出实际请求（在您的情况下为HTTP GET）之前启动预检请求（HTTP OPTION）。那个印前检查请求失败了。这就是为什么将注释添加到控制器将解决此问题的原因。

Answer 2

在根目录中创建具有以下内容的proxy.conf.json文件：

{ 
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

在package.json文件中，您必须将启动脚本从ng serve更改为ng serve --proxy-config proxy.conf.json

有关proxy-config的更多详细信息：Link

Answer 3

在Java上，请在您的api上添加以下内容

@CrossOrigin(origins = "http://localhost:4200")

您还可以从Angular代理请求。 Angular为您提供了可以代理请求的内置服务器。执行以下步骤：

在项目的根目录上添加proxy.config.json文件。
在proxy.config.json文件中添加以下代码

{ “ / api /”：{ “目标”：{ “ host”：“ localhost”， “ protocol”：“ http：”， “端口”：8080 }， “安全”：错误， “ changeOrigin”：是的， “ logLevel”：“调试” } }
在package.json中，找到脚本下的start并替换为以下内容：

ng serve --proxy-config proxy.config.json
使用以下代码编辑您的角度代码：

this.httpClient .get（'/ api / rest / v1 / game / progress'，httpOptions）。订阅（（回应）=> { console.log（response）; this.games =回应； console.log（this.games）; this.emitGameSubject（）; }，（错误）=> { console.log（'Erreur！：'+错误）; } ）;

请求中不存在“ Access-Control-Allow-Origin”标头

3 个答案: