飞行前响应在angular2/4中无效(重定向) [英] Response for preflight is invalid (redirect) in angular2/4

问题描述

我正在使用angular4作为前端，并使用springboot应用程序作为后端.前端和BFF(前端的后端)之间的集成方法是RESTful请求.

I am using angular4 as the frontend and springboot applicaiton as the backend. The integration methods between the frontend and the BFF(backend for frontend) are RESTful requests.

因此前端将POST请求发送到由SpringBoot REST控制器处理的后端端点，并且后端将302重定向响应返回到前端.

So the frontend sends out a POST request to the backend endpoints handled by SpringBoot REST controller, and the the backend return a 302 redirect response to frontend.

问题是我一直遇到 XMLHttpRequest无法加载 https://www.google .ca/.飞行前响应无效(重定向) 问题.

The problem is that I keep encountering the XMLHttpRequest cannot load https://www.google.ca/. Response for preflight is invalid (redirect) problem.

以某种方式我不认为这是服务器(后端)的问题，因为我使用邮递员测试了后端，并且确实进入了重定向的网站(邮递员未提供重定向的网站，它确实收到了网站文件)

Somehow i dont think it's the problem of the server(backend), since i use postman to test out the backend, and it indeed go to the redirected website (postman didnt render the redirected website tho, it did receive the website file)

angular4前端的POST请求

angular4服务文件中的可观察功能

validateData(id, pw, path): Observable<Object>{

    let url:string= "http://localhost:8080/backend";

    let headers = new Headers({'Accepts':'text/plain ; application/json', 'Content-type':'Application/json; charset=utf-8', 'Access-Control-Allow-Origin':'*'});

    let userData = JSON.stringify({username: id, password: pw, resumePath: path});

    let options = new RequestOptions({headers: headers});

    //return response 
    return this.http.post(url, userData ,options).map(res=>res.json());
}

调用组件文件中的可观察函数

validateData(id:string, pw:string, path:string){

  return this.loginService.validateData(id, pw, path).subscribe(

          //BFF return an object contains REF //implements interface on response
          response=> {
            console.log(response);
          }, 
          error=> { 
            console.log("error occurs");
            console.log(error);
          },
          ()=> {}
      );

}

从springboot应用程序后端响应头代码

后端Restcontroller

@CrossOrigin(origins = "http://localhost:4200") //enable CORS && temperory origin url
@RequestMapping(value= "/backend", method= RequestMethod.POST, produces= "text/plain")
public ResponseEntity getMockData (@RequestBody Credential credential) {

    System.out.println("username: "+ credential.getUsername()+" password: " +credential.getPassword()+" resumePath:" + credential.getResumePath());

    return this.postAuthCred(credential.getUsername(), credential.getPassword(), credential.getResumePath());
}

后端响应标头

private ResponseEntity postAuthCred(String username, String password, String path){

  HttpHeaders responseHeaders = new HttpHeaders();

  String responseBody= "http://www.google.ca";

  responseHeaders.add("Origin", "http://localhost:8080");
  responseHeaders.add("Access-Control-Allow-Origin", "*");
  responseHeaders.add("Accept", "text/plain;application/json");
  responseHeaders.add("Access-Control-Allow-Headers", "Content-Type, Content-Range, Content-Disposition, Content-Description");
  responseHeaders.add("Content-Type", "text/plain");
  responseHeaders.add("Access-Control-Allow-Methods ", "HEAD, GET, POST");
  responseHeaders.add("Access-Control-Max-Age", "1728000");
  responseHeaders.add("Location", "https://www.google.ca/");

  return new ResponseEntity(responseBody, responseHeaders, HttpStatus.FOUND);
}

网络日志的屏幕截图:

任何帮助将不胜感激，谢谢.

Any help will be appreciated, Thank you.

推荐答案

如果我正确阅读了此问题，则表明您正在这样做:

If I read this question correctly it appears that you are doing:

1. 前端从后端请求资源
2. 后端响应并重定向到Google
3. 前端尝试从Google提取请求，但由于CORS而失败

除非目标服务器(Google)明确允许，否则不允许网站在其范围之外(在您的示例中为localhost)发出XHR请求. Chrome不允许您的网站代表用户向google.com发出请求.您可以设置窗口位置(例如，重定向浏览器)，但不能从后端进行设置.

A web site is not allowed to make an XHR request outside of its scope (localhost in your example) unless the target server (Google) explicitly allows it. Chrome does not want to allow your site to make requests against google.com on behalf of the user. You can set the window location (e.g. redirect the browser) but you can't do it from the backend.

听起来您正在单页应用程序中处理某种身份验证流程.一种可能有效的工作流程是:

It sounds like you are processing some kind of authentication flow in a single page application. One workflow that may work is:

• 让服务器使用401响应所有缺少身份验证的API请求.
• 服务器(/登录)上具有一个端点，该端点以302响应google
• 在前端，监听401，如果检测到，则将窗口位置更改为/login.

这篇关于飞行前响应在angular2/4中无效(重定向)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！